ruby 是语义化注音结构，需 rb 与 rt 成对、单字包裹、显式设置 ruby-align 和字体行高，多音字须手动标注，旧浏览器依赖 rp 降级，Safari 需 transform 修复间距。
ruby 标签不是“加拼音的装饰工具”，它是语义化注音结构，用错就直接失效——比如拼音贴到前一个字上、整段被忽略、或在 Safari 里左对齐飘走。
rb 和 rt 必须成对出现，且 rb 不可省略
写成 <ruby>汉<rt>hàn</rt></ruby> 看似简洁，但 Safari、旧 Edge 会把 rt 当作无锚点文本，ruby-align 失效，拼音可能偏左、偏上一整行。浏览器需要 rb 来确定每个字的基线和宽度，才能把对应 rt 居中对齐。
- 每个汉字必须包裹在独立的
rb中：<rb>汉</rb>，不能混用普通文本 - 多字词如「中国」必须拆开：
<ruby><rb>中</rb><rt>zhōng</rt><rb>国</rb><rt>guó</rt></ruby> - 不要试图复用
rt：<rb>中</rb><rb>国</rb><rt>zhōng guó</rt>→ 多数浏览器只给「国」标音
ruby-align: center 必须显式声明，且要配 font-size 和 line-height
不写 ruby { ruby-align: center; }，Safari 16 及更早版本默认回退到 start；Chrome/Firefox 在 text-align: right 或 RTL 环境下也会被覆盖。但光写这句没用——ruby-align 只管水平居中，垂直错位、截断、挤压全由字号和行高决定。
- 统一设
ruby { line-height: 1.2; }，避免继承父级过大的行高 -
rt必须用固定font-size: 0.6em（不用百分比，各浏览器缩放逻辑不同） - 给
rt加line-height: 1;，防止自身行高干扰基线对齐 - 加
white-space: nowrap;到父容器，防换行撕裂字-音对应
多音字和生僻字别靠「智能匹配」，得手动拆字+标注
ruby 不识别上下文，不会根据「长」在「长度」还是「成长」里自动选音。你写什么，它就显示什么，语音合成器也照读不误。强行塞进「fǒu/pǐ」这种写法，TTS 会读成两个音节，语义混乱。
立即学习“前端免费学习笔记（深入）”；
- 每个字单独套一层
ruby：<ruby><rb>否</rb><rt>pǐ</rt></ruby> - 地名如「重庆」必须按实际读音拆：
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby> - 需要切换读音时，JS 操作目标必须是具体
rb+ 对应rt，别用document.querySelector('ruby rt')批量改——容易改错位置
老浏览器降级显示要靠 rp，但别指望它完美兼容
IE 全系、Android 4.3 WebView、Outlook Desktop 完全不解析 ruby 相关标签，会丢弃 rt 和 rp 标签，但保留其文本内容。结果就是「汉(hàn)」变成「汉hàn」平铺显示——难看但至少可读。
-
rp是 fallback 括号，写法必须紧邻rt：<rp>(</rp><rt>hàn</rt><rp>)</rp> - 现代项目若不需支持 IE 或旧邮件客户端，
rp可省略；但教育类、政务类站点建议保留 - 别为兼容性牺牲语义：用 CSS 隐藏
rt再用伪元素模拟拼音，会破坏屏幕阅读器识别和 TTS 行为
最易被忽略的点：连续多个 ruby 在 Safari 里默认有异常字间距，尤其嵌套在 contenteditable 中时，得加 transform: translateZ(0) 触发 GPU 渲染——这不是优化技巧，是 Safari 的渲染 bug 修复刚需。
