ruby标签不适用于双语歌词整行对照，仅支持逐词短注音；必须用rb+rt严格嵌套，rt不可换行、语义非翻译，长内容易错位截断，无障碍支持差。
ruby 标签的基本结构是否支持双语歌词？
支持，但必须严格遵循 ruby 的嵌套规范：外层 ruby 包裹基文（如中文歌词），rt 作为注音/对照内容（如英文翻译），且 rt 必须紧跟在对应基文节点之后。浏览器默认把 rt 渲染为小号、上标文字，适合短句对照；长句或整行翻译会挤在一起或换行错位。
双语歌词逐词对照 vs 整行对照怎么选？
逐词对照用 ruby + rt 最自然，比如「<ruby>爱<rt>love</rt></ruby>」；但整行中英对照不建议强行塞进一个 ruby 块——rt 无法换行，且语义上不属于“注音”，易被屏幕阅读器误读。更稳妥的做法是：用 div 或 p 分两行，配合 CSS 控制垂直间距和对齐：
<p class="lyric-line">春风拂面</p> <p class="lyric-translation">Spring breeze brushes my face</p>
如果坚持用 ruby 实现整行效果，需包裹整个中文行并配单个 rt，但要注意：
-
rt内容过长时，部分浏览器（如旧版 Safari）会截断或溢出容器 - 无法设置
rt的行高或文本对齐，CSS 支持有限 - 语义错误：W3C 明确指出
rt应用于发音或简短说明，非翻译主体
如何让 ruby 对照在移动端不重叠、不缩小？
默认情况下，某些安卓 WebView 或 iOS Safari 会自动压缩 rt 字体大小，甚至导致中英文字重叠。关键修复点有三个：
- 强制重置
rt样式：rt { font-size: 0.8em; line-height: 1.2; } - 禁用浏览器自动缩放：
ruby { -webkit-text-size-adjust: none; text-size-adjust: none; } - 给父容器设最小宽度，防止换行挤压：
.lyric-ruby { min-width: 120px; }
另外，避免在 ruby 外层用 flex 或 grid 布局，容易触发渲染 bug；改用 display: inline-block 更稳定。
aria-label 和 screen reader 兼容性要注意什么？
屏幕阅读器通常跳过 rt，或把它和基文连读（如“爱 love”），造成语义混乱。若歌词需无障碍支持，不能只依赖 ruby。正确做法是：
- 为每组对照添加
aria-label，例如：<ruby aria-label="love">爱<rt>love</rt></ruby> - 或完全放弃
ruby，改用带role="group"的span组合：<span role="group" aria-label="爱 love"><span>爱</span><span class="trans">love</span></span> - 切勿在
rt上加aria-hidden="true"——这会让翻译彻底不可访问
真正难处理的是混合节奏的歌词，比如中文三字、英文五词，此时 ruby 的一对一结构反而成为限制，不如用表格或 CSS Grid 手动对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
