ruby标签必须嵌套rb和rt使用，rb为基文字、rt为注音，需一一对应且顺序一致；错误省略rb或错位会导致渲染异常、无障碍失效及seo风险。
ruby 标签的基本结构必须严格嵌套
HTML 的 ruby 不是独立使用的标签，它必须配合 rb（base text）和 rt（ruby text）才能正确渲染双行旁注。浏览器默认把 rb 当作被注释的主文字，rt 当作上方小号注释文字，两者需一一对应。常见错误是直接写 <ruby>汉字<rt>拼音</rt></ruby> —— 缺少 rb 会导致语义不完整，部分旧版 Safari 或屏幕阅读器可能忽略或误读。
正确写法示例：
<ruby><rb>汉</rb><rt>hàn</rt><rb>字</rb><rt>zì</rt></ruby>
注意：rb 和 rt 必须成对、顺序一致；不能交叉或错位，否则旁注会错行或丢失。
多音字或长注释需要手动拆分 rb/rt 对
一个 rb 只能对应一个 rt，无法用单个 rt 覆盖多个汉字（比如「重庆」注为「chóng qìng」就不能只包一层 rt）。强行合并会导致注音挤在第一个字上方，或被截断。
可行做法是按字或语义单位切分：
- 「重庆」→
<rb>重</rb><rt>chóng</rt><rb>庆</rb><rt>qìng</rt> - 「北京大学」→ 拆成四组
rb/rt，或按词切分为「北京」+「大学」两组（需确保语义合理）
不推荐用空格或零宽字符“欺骗”排版，CSS 无法可靠控制 rt 的宽度继承，容易在缩放或不同字体下错位。
rt 在 Chrome/Firefox 中默认垂直居中，但 Safari 需要额外处理
现代 Chrome 和 Firefox 对 rt 的 baseline 对齐较稳定，但 Safari（尤其 iOS 16 及更早）会把 rt 渲染得偏高，甚至压到上一行内容。这不是 bug，而是其默认 line-height 和 vertical-align 计算方式差异所致。
稳妥方案是显式重置样式：
ruby rt {
line-height: 1;
vertical-align: top;
font-size: 0.6em;
}
关键点：
-
line-height: 1消除行高带来的浮动偏差 -
vertical-align: top强制顶部对齐，比text-top更可控 -
font-size建议用 em 单位，避免在缩放时失比例
不要依赖 ruby-align 或 ruby-position —— 这两个 CSS 属性目前仅 Firefox 支持，且行为不稳定。
无障碍与 SEO 场景下 ruby 内容不可隐藏或替换
屏幕阅读器（如 VoiceOver、NVDA）会按顺序朗读 rb 后紧跟的 rt，即「汉，hàn；字，zì」。如果用 CSS 把 rt 设为 display: none 或 visibility: hidden，注音信息将完全丢失，对视障用户不友好。
同样，搜索引擎不会索引 rt 内容，但它参与 DOM 结构语义解析。若为 SEO 强行用 JS 动态插入 rt，可能导致爬虫抓取不到注音，且首次渲染延迟。
正确做法：
- 所有
rt必须写在 HTML 源码中，不可 JS 注入 - 避免用
aria-label重复注音 —— 会造成冗余播报 - 如需支持无 CSS 环境（如纯文本邮件），应在
rb后括号补充拼音，作为降级 fallback
旁注真正难的不是写法，而是保持语义准确、视觉对齐、无障碍可用三者同步 —— 少一个环节，中文阅读体验就掉一档。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
