现代浏览器中rb标签为强制性结构前提，缺失或错位会导致ruby注音失效；非汉字字符（含空格、数字等）也必须逐字符用rb包裹，且rp仅能在rt内作为纯括号fallback使用。
现代浏览器（Chrome 120+、Firefox 125+、Safari 17+）必须显式写出 rb 标签，否则 ruby 块会被当作纯文本平铺渲染——你写了拼音，但用户根本看不到。
为什么写了 ruby 和 rt 却没显示拼音
核心原因是漏了 rb。它不再是可选标签，而是现代渲染引擎的硬性结构前提。浏览器按 DOM 顺序严格匹配 rb 与 rt：数量不等、顺序错乱、或 rb 缺失，都会导致整段注音失效。
-
<ruby>汉<rt>hàn</rt></ruby>→ 降级为“汉hàn”，rt内容直接 inline 显示 -
<ruby><rb>汉</rb><rt>hàn</rt></ruby>→ ✅ 正确，拼音出现在汉字正上方 - 混用普通文本和
rb（如<ruby>中<rb>国</rb><rt>guó</rt></ruby>）→ “中” 不被标注，“国” 的拼音可能错位
rb 必须逐字符包裹，包括空格、数字、英文和标点
任何非汉字字符都必须原样放进 rb，否则 rb 与 rt 数量不一致，注音链断裂。动态生成时尤其容易踩坑。
- 错误示例：
pypinyin.lazy_pinyin("A1", errors='ignore')可能只返回['1']，漏掉 'A'，导致rb多一个、rt少一个 - 正确做法：遍历原文本每个字符（含空格、emoji、全角符号），用索引对齐拼音数组
- 非汉字字符也要占位：
<rb> </rb><rt> </rt>或<rt></rt>，不能跳过
rp 不是装饰，是 fallback 的开关，但位置和内容有硬约束
rp 唯一合法位置是 rt 内部开头或结尾，且内容只能是纯括号字符（(、)、[、]），多一个空格或字母都会让降级失效。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
<rt><rp>(</rp>hàn<rp>)</rp></rt> - ❌ 错误：
<rp>(</rp><rt>hàn</rt><rp>)</rp>（rp在rt外，被忽略） - ❌ 错误：
<rt><rp>( </rp>hàn</rt>（rp含空格，部分浏览器不触发 fallback） - Chrome 会把
rp渲染出来（显示“汉(hàn)”），Safari 则隐藏——上线前必须实测双端表现
多字、多音、地名必须拆开写，不能靠一个 ruby 包整词
中文拼音标注本质是字级的。ruby 不识别语义，也不自动分词。强行合并会导致屏幕阅读器无法分别播报、CSS 无法精准控制、排版在窄屏上折行错位。
- “重庆”必须写成：
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>，否则易被读作zhòng qìng - “长”在“长度”中读
cháng，在“生长”中读zhǎng，需人工判断并手动指定 - 避免
<ruby>汉字<rt>hàn zì</rt></ruby>—— 表面有效，实则语义模糊、无障碍支持残缺、响应式下易断行
最容易被忽略的是 rb 的强制性——它不是历史遗留的兼容写法，而是当前所有主流新版浏览器的渲染前提；另一个盲区是所有非汉字字符都必须参与结构包裹，哪怕只是空格或数字，否则整个注音逻辑就崩了。
