ruby是HTML5语义化注音标签，需嵌套rb与rt，主流浏览器支持但IE不支持；多音字须逐字标注，样式需单独设置rb/rt字体大小，不支持横向精调；兼容性不足时可用span模拟并补充aria-label。
ruby标签的基本结构和浏览器兼容性
ruby 是 HTML5 原生支持的语义化标签，专为东亚文字注音、注解设计，比如给「饕餮」标上拼音「tāo tiè」，或给繁体字加简体释义。它不是装饰性元素，而是有明确语义的内联容器，主流浏览器（Chrome 5+、Firefox 38+、Safari 5+、Edge 12+）都已稳定支持，但 IE 完全不支持 —— 如果项目还需兼容 IE，得用 span 模拟或引入 polyfill。
- 必须包含
rb（base text，即被注解的汉字）和rt（ruby text，即标注内容），二者需成对嵌套在ruby内 - 可选
rp（ruby parentheses），用于包裹括号，供不支持ruby的老浏览器降级显示（如显示为「饕餮(tāo tiè)」） - 不要嵌套其他块级元素，
ruby只接受rb、rt、rp和文本节点
<ruby> <rb>饕</rb><rt>tāo</rt> <rb>餮</rb><rt>tiè</rt> </ruby>
多音字与长词组的 rb/rt 对齐逻辑
rb 和 rt 并非严格“一对一”，而是按字符序列顺序配对：所有连续的 rb 组成基文，所有连续的 rt 组成标注，浏览器会自动按字符数平均分配（前提是字符数相等）。一旦数量不匹配，渲染就容易错位。
- 若基文是 4 字词（如「魑魅魍魉」），而只写了 2 个
rt，多数浏览器会把前两个rt分别撑满前两字宽度，后两字无标注或挤在一起 - 多音字必须拆成独立
rb+rt组合，不能靠 CSS 强行切分 —— 浏览器不识别字内断点 - 长词组建议逐字标注，避免跨字合并（如「中华人民共和国」不推荐一个
rt写「Zhōnghuá Rénmín Gònghéguó」），否则换行或缩放时易断裂
<ruby> <rb>中</rb><rb>华</rb><rb>人</rb><rb>民</rb> <rt>Zhōng</rt><rt>huá</rt><rt>rén</rt><rt>mín</rt> </ruby>
样式控制：避免默认上下堆叠破坏排版
默认情况下，rt 渲染在 rb 正上方（横排）或右方（竖排），但字体大小、行高、间距常不符合设计需求。CSS 中不能直接给 ruby 设 font-size，它会继承父级；真正起效的是对 rb 和 rt 单独设置。
-
rt默认较小，建议显式设font-size: 0.6em或更小，并加line-height: 1防止上下溢出 - 若需调整
rt与rb的垂直距离，用ruby-position: under切换位置，或通过margin微调（注意部分浏览器对rt的 margin 支持不稳定） - 不要用
display: inline-block强改rb/rt，会破坏 ruby 的内部布局逻辑，导致对齐失效
关键限制：目前没有标准 CSS 属性能精确控制 rt 相对于单个 rb 的横向偏移（如让拼音左对齐而非居中），只能靠整体缩放或 font-feature-settings 调整字距。
立即学习“前端免费学习笔记（深入）”；
替代方案：当 ruby 不适用时的务实选择
遇到以下情况，硬套 ruby 反而增加维护成本：
- 需要支持 IE 或极老安卓 WebView（
ruby在 Android 4.3 及更早版本中不可靠） - 标注内容含 HTML（如带链接的释义）、动态生成且长度不可控
- 设计要求标注文字旋转 90° 或叠加在字右下角（非标准 ruby 位置）
此时更稳妥的做法是放弃语义化，用 span 模拟：
<span class="ruby-group"> <span class="rb">饕</span> <span class="rt">tāo</span> </span>
配合 CSS 定位（position: relative / absolute）实现视觉效果，并在 aria-label 中补全语义（如 aria-label="饕 tāo"），兼顾可访问性与兼容性。
复杂点在于：语义正确性和视觉可控性往往不可兼得；ruby 看似简单，但一旦涉及动态数据、国际化混排或精细样式，就得提前判断是否值得为这点语义付出调试成本。
