ruby 标签需显式包含 rb 元素，否则现代浏览器（Safari 16.4+、Chrome 115+、Firefox 120+）会忽略 rt；rb 与 rt 必须同级紧邻；连续 ruby 在 iOS Safari 中产生微小间隙，需父容器 font-size: 0 修复；rp 成对用于降级兼容；动态注入时 rt 必须为 ruby 直接子元素，且服务端空 rt 应省略。
ruby 标签在现代浏览器里能用，但多数人写法一上线就失效——不是浏览器不支持，而是结构错了一处，整个注音就降级成平铺文本。
ruby 必须显式包含 rb，否则 Safari 和新版 Chrome 直接忽略 rt
很多人沿用老教程写 <ruby>汉<rt>hàn</rt></ruby>，这在 Safari 16.4+、Chrome 115+、Firefox 120+ 中已不被识别为有效注音结构。浏览器会把 rt 当作孤立标签丢弃，只留下“汉”字，拼音消失。
必须写成：
<ruby> <rb>汉</rb> <rt>hàn</rt> </ruby>
-
rb不可省略，它是rt的语义锚点，没有它，rt就失去定位依据 -
rb和rt必须同级、紧邻，中间不能有空格、换行或其它标签 - 安卓 WebView（尤其 Android 12 以下）对无
rb结构兼容更差，容易整段注音不渲染
连续多个 ruby 在 iOS Safari 中会多出不可见间隙
写 <ruby><rb>一</rb><rt>yī</rt></ruby><ruby><rb>衣</rb><rt>yī</rt></ruby><ruby><rb>带</rb><rt>dài</rt></ruby>，在 iOS 17.5 Safari 里，字与字之间会出现约 0.1em 的额外空白，肉眼难察但排版失准。
立即学习“前端免费学习笔记（深入）”；
- 根本原因是 Safari 对连续
ruby元素的font-size继承计算异常 - 修复方式：用父容器设
font-size: 0，再给每个ruby单独设font-size: 16px或em值 - 别用
letter-spacing: -0.05em强行拉近——会破坏字体缩放和屏幕阅读器播报节奏
rp 不是装饰，是降级时防止“汉字+拼音”连读的关键开关
不加 rp 时，IE11、Outlook 桌面版、部分邮件客户端会把“汉hàn”直接连成“汉hàn”，用户根本分不清哪是字哪是音，尤其生僻字场景极易误读。
正确 fallback 写法：
<ruby> <rb>饕</rb> <rt>tāo</rt> <rp>(</rp><rp>)</rp> </ruby>
-
rp必须成对、且只能含括号字符( ) [ ]，写<rp>(tāo)</rp>会被忽略 - 现代浏览器自动隐藏
rp，只渲染rt；老环境则显示“饕(tāo)” - 若项目明确不支持 IE/Outlook，可省略
rp，但 CMS 输出或邮件模板中务必保留
动态注入 ruby 时，rt 必须是 ruby 的直接子元素
React 中写 <ruby>{char}<span><rt>{pinyin}</rt></span></ruby>，或 Vue 的 v-html 拼接字符串漏掉 rb，都会导致语义断裂：屏幕阅读器跳过 rt，CSS 无法精准控制垂直位置，甚至触发 Safari 的 layout thrashing。
- 确保生成的 DOM 是严格
ruby > rb, ruby > rt，不能嵌套在span、div或其它 wrapper 里 - 服务端渲染时，若拼音为空（如未收录生僻字），宁可不输出
ruby块，也不要留空<rt></rt>——部分 NVDA 版本会读出“空白注音” - 用
DOMPurify过滤时，必须显式允许['ruby', 'rb', 'rt', 'rp']，否则会删掉关键标签
真正麻烦的从来不是“怎么加拼音”，而是当一个字在不同语境读音不同、声调随连读变化、还要兼顾盲人用户听清每个音节时，ruby 的静态结构立刻暴露局限——它不解析语义，也不响应上下文，所有逻辑都得靠人手动拆解、校对、硬编码。
