ruby标签专为歌词假名同步标注设计，必须每个汉字配独立rb与rt一一对应，如“春<rb>春</rb><rt>はる</rt>風<rb>風</rb><rt>かぜ</rt>”，禁用跨字合并或结构错序，否则导致假名错位。
ruby标签在歌词标注中能做什么
ruby 不是 Ruby 编程语言，而是 HTML 中专为注音、旁注设计的语义化标签。它天然适合日语歌词的假名同步标注（如汉字旁显示对应读音），浏览器原生支持基础排版，不需要 JS 就能实现「歌词字与假名严格对齐」的效果——前提是结构写对，且不依赖 CSS 强行破坏默认流。
但要注意：ruby 的默认行为是「一个 rb（基文）配一个 rt（注音）」，不能跨字合并注音，也不能让多个 rt 共享一个 rb。这意味着「漢字」必须拆成「漢」「字」两个 rb，各自带 rt，否则「かんじ」会被整个贴在「漢字」下方，失去逐字同步效果。
标准结构怎么写才不出错
常见错误是把整行歌词塞进一个 ruby，或漏掉 rb 直接套 rt。正确结构必须满足：每个可读汉字/词根是一个 rb，每个对应假名是一个 rt，且一一对应、不嵌套、不跳级。
正确示例：
<ruby> <rb>春</rb><rt>はる</rt> <rb>風</rb><rt>かぜ</rt> <rb>が</rb><rt>が</rt> <rb>吹</rb><rt>ふ</rt> <rb>く</rb><rt>く</rt> </ruby>
关键点：
-
rb和rt必须同级、交替出现，不能rb套rt，也不能rt在rb外 - 平假名/片假名本身不用再标音，只给汉字或难读汉字加
ruby - 助词（が・を・に等）通常不标音，但若需强调发音或教学用途，可单独加
rb/rt - 避免用
rp（括号 fallback）——现代浏览器已无需它，反而容易干扰样式
Chrome/Firefox/Safari 渲染差异和兼容底线
主流浏览器都支持 ruby，但细节有差别：Safari 对 ruby 内换行和空格更敏感，Firefox 在 flex 容器里可能压缩 rt 高度，Chrome 则对 font-size 缩放最稳定。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要给
ruby设display: block或inline-flex，保持默认inline - 控制假名大小用
rt { font-size: 0.6em; }，别碰line-height，否则 Safari 可能错位 - 如需整行居中，对父容器设
text-align: center，别对ruby自身设margin: auto - IE 完全不支持
ruby，若需兼容，得用 JS 动态生成span模拟，但那就不是「HTML 原生方案」了
遇到「假名飘到字右边」或「堆叠成一列」怎么办 这基本是结构误写或 CSS 干预过重导致的。典型诱因：
常见错误现象及修复：
- 「假名全挤在右侧」→ 检查是否漏写了
rb，比如写了<rt>はる</rt><rb>春</rb>（顺序反了） - 「所有假名叠在第一字下方」→ 把多个
rb写成一个，如<rb>春風</rb><rt>はるかぜ</rt>（必须拆开） - 「假名变超大/超小」→ 查 CSS 是否全局设置了
rt { font-size: 120%; }，应限定作用域，如ruby rt { font-size: 0.65em; } - 「手机上错行断开」→ 避免在
ruby内用white-space: nowrap，改用ruby { white-space: nowrap; }包住整组
复杂歌词（如连浊、促音、长音）需要人工核对假名切分，ruby 不会自动处理语音规则——它只是排版容器，不是语音引擎。
