ruby注音必须严格遵循rb与rt成对且顺序正确的结构，缺一不可；多字需分拆为独立ruby块，声调用unicode符号，降级依赖rp括号，结构错误将导致语义失效和可访问性丧失。
ruby标签必须配rb和rt才生效
单独写<ruby>汉</ruby>或<ruby></ruby>不会渲染任何注音，浏览器只当它是普通内联容器。真正触发注音逻辑的是rt，但它必须是ruby的直接子元素，且必须有rb显式包裹被注字——现代 Chrome、Safari 17.4+、Firefox 都已不兼容省略rb的写法。
常见错误包括：<ruby>汉<rt>hàn</rt></ruby>（缺rb）、<ruby><rt>hàn</rt><rb>汉</rb></ruby>（rt在rb前）或<ruby><rb>汉</rb><rt>hàn</rt><rt>zì</rt></ruby>（rt数量多于rb）。这些都会导致拼音错位、截断，甚至整段被忽略。
-
rb必须包裹单个被注字，不能是词或空格分隔的字符串 -
rt必须紧跟对应rb，中间不能有换行、空格或其它标签 - 多字必须拆成多个独立
ruby块，不能共用一个rt
多音字和地名必须手动逐字标注
ruby不解析上下文，也不会自动选音。“长”在“长度”里读cháng，在“生长”里读zhǎng，你写什么就显示什么；“重庆”必须标为chóng qìng而非zhòng qìng，否则语义错误且易被误读。
正确做法是每个字独立包裹：<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>。强行合并如<ruby><rb>重庆</rb><rt>chóng qìng</rt></ruby>会导致拼音压缩、对齐失控，屏幕阅读器也无法分别播报两字。
- 连续多个
ruby在 iOS Safari 中可能出现微小间距异常，可用父容器font-size: 0+ 子元素重设字号缓解 - 声调必须用 Unicode 声调符号（如
zhōng），禁用数字标调（如zhong1），后者在移动端字体支持不稳定 - 禁用全角空格、中文逗号或顿号分隔拼音，
rt内只能是半角小写字母+Unicode 声调
CSS重置rt样式时别破坏语义对齐
浏览器对rt的默认渲染差异极大：Chrome 可能缩得太小，Safari 可能不居中，Firefox 可能拉高行距。直接依赖默认样式几乎必然出问题。
必须重置的关键项：ruby { ruby-position: over; }（显式声明上标位置，避免竖排错位）；rt { font-size: 0.6em; line-height: 1; }（固定缩放比例，防止截断或留白过大）；ruby-align: center（让拼音水平居中于基字）。
- 禁用
vertical-align: super或margin-top模拟上移——缩放、换字体时极易偏移 - 不要给
ruby设display: inline-block或position: absolute，会破坏内联流和屏幕阅读器识别 - 避免在
rt里嵌套strong、span等行内元素，部分浏览器会破坏垂直对齐
兼容性降级必须靠rp，不是靠JS检测
IE ≤ 10、Android 4.3 WebView、Outlook Desktop 等环境完全不解析ruby相关标签。它们会丢弃rt，但里面的文本常作为普通文本流渲染出来，结果变成“汉hàn”这种不可读格式。
rp不是装饰，是 fallback 的开关。标准写法是：<ruby><rb>你</rb><rt>nǐ</rt><rp>(</rp><rp>)</rp></ruby>。现代浏览器隐藏rp，只显示拼音；老环境则显示“你(nǐ)”。没有它，降级后就是裸拼音堆砌，毫无可读性。
-
rp必须成对出现，且内容只能是纯括号字符（(、)、[、]），其他内容会被忽略 - 若项目明确不支持 IE 或老旧 UA，可省略
rp，但需确认邮件客户端、CMS 导出等下游环节是否真绕得过 - 服务端渲染时若拼音数据为空，务必避免输出空
<rt></rt>——部分屏幕阅读器会读出“空白注音”
最常被忽略的点是：结构断裂比样式错位更致命。只要rb和rt没对齐，再精细的 CSS 也救不回语义和可访问性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
