ruby标签必须严格配对rb与rt，缺一不可；多字需分拆为独立ruby单元；rp用于降级兼容；样式需谨慎控制以避免渲染异常。
直接说结论：ruby 标签不是“加个拼音就行”，漏掉 rb 或 rt、结构嵌套错位、动态生成时拼字符串，都会导致注音不显示、错位、读屏器失效——哪怕在 Chrome 里看着正常，Safari 或屏幕阅读器可能完全忽略。
ruby 必须配 rb 和 rt 才能生效，单独写无效
浏览器只把 rb 当基准字、rt 当注音内容，缺一不可。写成 <ruby>汉</ruby> 或 <ruby><rt>hàn</rt></ruby> 都不会渲染拼音，现代 Safari 和 Firefox 甚至会跳过整个 rt。
-
rb必须显式包裹每个被注音的字，不能省略（W3C 虽标为 obsolete，但所有主流浏览器当前仍强制要求） -
rt必须是ruby的直接子元素，且紧贴对应rb后面，中间不能有空格、换行或<span>等标签 - 常见错误：用
v-html拼接<ruby>${char}<rt>${pinyin}</rt></ruby>—— 若char含&或引号，DOM 直接断裂
多字注音必须逐字独立 ruby，不能共用 rt
写成 <ruby><rb>重庆</rb><rt>chóng qìng</rt></ruby> 表面能出拼音，但声调挤在一起、换行时字和音脱节、屏幕阅读器无法分字播报。
- 正确写法是两个独立单元：
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby> - 数字/英文也要同样处理，比如「第123页」→ 每个字符都套一层
ruby，否则窄屏下「123」断行，拼音还挂在上一行末尾 - Vue/React 中务必封装为组件（如
<RubyText char="重" pinyin="chóng" />），避免字符串拼接破坏结构
rp 不是可选装饰，是降级兼容的关键开关
rp 的作用很具体：在不支持 ruby 的环境（如旧版 Outlook、Android 4.x WebView、部分读屏软件）中，让拼音至少以括号形式可读。没有它，降级后就是「汉hàn」连在一起，完全不可读。
立即学习“前端免费学习笔记（深入）”；
-
rp必须成对出现，且只能嵌在rt内部，内容只能是纯括号字符（(、)、[、]），多一个空格或字母都会让 fallback 失效 - 标准写法：
<rt><rp>(</rp>hàn<rp>)</rp></rt>；Chrome 会渲染括号，Safari 则隐藏，但老环境能显示「汉(hàn)」 - 如果项目明确不需兼容 IE 或老旧 UA，可省略
rp，但需确认邮件客户端、PDF 导出工具（如 wkhtmltopdf）是否真能绕过——它们多数压根不实现ruby布局模块
样式控制必须克制，line-height 和 font-size 是最大雷区
浏览器对 rt 的默认排版逻辑不一致：font-size: 50% 在不同引擎下缩放比例不同，line-height 不继承父级，容易导致拼音贴底、重叠或上下留白失控。
- 强制设置
ruby { line-height: 1.8; }（至少比汉字字号大 0.6），防止 Firefox 把拼音压在基字上 -
rt的字号建议用固定像素（如12px），别用百分比；同时加rt { line-height: 1; }锁死行高 - 禁用
ruby { display: inline-block; }—— 会破坏内联流，导致换行异常 - 中文混排英文/数字时，给整个
ruby组合加white-space: nowrap;，避免断行错位
最常被忽略的一点：服务端渲染时若拼音为空，必须跳过整个 rt，而不是输出 <rt></rt> —— 部分屏幕阅读器会读作“空白注音”，干扰用户。
