rt标签rb属性深度解析

在前端实现注音（ruby）时， 标签最容易被忽略。它虽不占视觉空间，却决定了整个注音能否被正确解析、朗读和换行。以下梳理几个常见踩坑点。

rb标签不是可选的，必须显式写出

很多人习惯写 汉hàn，以为省掉 是简写，结果 Firefox 和 Safari 直接忽略 ，只显示“汉hàn”连在一起。Chrome 虽然能勉强渲染，但语义已经断裂——屏幕阅读器读不出“这是‘汉’的拼音”，而是把“汉”和“hàn”当成两个独立词。

真正有效的最小结构只能是：汉hàn。这里的 不是装饰性容器，它承担语义锚点作用：告诉浏览器“这段基文字是‘汉’，下面那个 是它的注音”。

• 内必须是纯文本节点，或仅含内联格式（如 重 可以接受）
• 不能嵌套块级元素（
  、

  ），也不能含空格或换行符
• 多字时每个字都要单独配 + ，不能合并在一个 里

rb与rt必须严格紧邻，中间不能有任何字符

看似无害的换行、空格、零宽字符（比如 ），都会让浏览器判定结构断裂。举个例子：

重chóng

这种写法在 Chrome 120+ 中或许能勉强渲染，但在 Safari 17+ 或 VoiceOver 下会跳过整个注音块——因为规范要求 和 必须是相邻兄弟节点，中间不能插入任何文本节点。

• 正确写法：所有标签必须写在同一行，或者用 HTML 注释隔开（重chóng）
• 不能用 或全角空格替代，它们仍算文本节点
• 构建工具（如 Vue / React）如果自动加换行，需要配置模板压缩或使用 v-pre 避免插值干扰

rb不支持嵌套，也不接受样式覆盖

有人试图给 加 font-size 或 color 来突出基字，结果发现样式无效或者触发布局错乱。原因在于 是 ruby 布局模型中的“基线锚点”，浏览器会强制把它作为不可分割的语义单元来处理。

• 上设 display、margin、padding 会破坏自动对齐逻辑
• 想调整基字大小？直接改父级 的 font-size， 会继承
• 需要强调某个字？用 包裹其内容（重），而不是给 加类

rb数量必须与rt一一对应，且顺序不可颠倒

常见错误是把多个汉字塞进一个 ，再配一个 ，比如：重庆chóng qìng。这样会导致声调位置错乱（“qìng”的第四声标在“庆”上，但视觉上可能偏右）、换行时“重”和“chóng”脱钩、“庆”和“qìng”错配。

• 中文场景下，按字粒度拆分最稳妥：重chóng庆qìng
• 英文/数字混排也要同样处理：第dì123yī èr sān
• 不能颠倒顺序：hàn汉 是无效结构，浏览器不识别

实际应用中最容易被忽略的，恰恰是 的“不可见但不可缺”特性——它不占视觉空间，却决定整个注音能否被正确解析、朗读、换行和缩放。一旦漏写、错位或包裹不当，问题不会立刻报错，而是静默降级为平铺文本，等上线后被读屏用户或移动端用户发现才暴露，那时再修复就麻烦了。