深度解析rt标签的rb属性

<rb>标签是ruby注音结构中不可省略的语义锚点，必须显式写出并与<rt>严格相邻；每个基字需独立配<rb><rt>对，<rb>内仅容纯文本或内联元素，禁用块级元素、空格及换行。

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

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

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

• <rb> 内必须是纯文本节点，或仅含内联格式（如 <strong>重</strong> 可接受）
• 不能嵌套块级元素（<div>、<p>）、不能含空格或换行符
• 多字时每个字都要单独配 <rb> + <rt>，不能合并在一个 <rb> 里

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

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

<ruby><rb>重</rb><rt>chóng</rt></ruby>

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

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

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

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

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

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

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

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

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