ruby 标签必须配 rb 和 rt 才能稳定渲染，rb 是语义锚点包裹单个汉字，rt 是紧邻其后的发音载体，二者须一一对应、不可省略或跨层；多字需拆为多个独立 ruby 块。
ruby 标签不是“加拼音的快捷方式”，它只在结构语义正确、浏览器识别明确时才真正生效；错用比不用更糟——视觉看似正常，但屏幕阅读器读错、打印排版崩坏、响应式换行异常，全因结构松动。
为什么 ruby 必须配 rb 和 rt 才能稳定渲染
现代浏览器（Chrome 115+、Safari 17.4+、Firefox 120+）已不再容忍省略 rb 的写法。仅写 <ruby>汉<rt>hàn</rt></ruby> 会导致：
- 拼音在 Safari 中右贴汉字、不居中上标
- 多字场景下（如“重庆”）被合并为一个注音单元，rt 内容错位或截断
- 屏幕阅读器无法将“重”和“庆”分别关联到对应拼音，朗读为“重庆 chong qing”而非“重 chóng / 庆 qìng”
rb 是语义锚点，告诉浏览器“这个字是基字”；rt 是发音载体，必须紧邻对应 rb。二者必须一一对应、不可跨层、不可省略。
-
rb必须显式包裹单个被注音字符，不能是纯文本节点 -
rt必须是ruby的直接子元素，且紧跟在对应rb后（中间不能有空格、换行或其它标签） - 多字必须拆成多个独立
ruby块：<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>
动态注入时怎么避免结构断裂和 XSS 风险
服务端拼接或前端模板直接插值极易破坏 DOM 结构，尤其当汉字含&、、<code>> 或 Unicode 特殊字符时。
- 不要这样写：
v-html="<code><ruby><rb>${char}</rb><rt>${pinyin}</rt></ruby>" —— 一旦char是"A&B"，就会闭合标签导致后续内容裸奔 - 不要用
innerHTML = <code>...直接赋值，未过滤的字符串可能触发 XSS - 正确做法是封装为组件：Vue 中定义
<ruby-text :char="c" :pinyin="p"></ruby-text>，模板内固定结构；React 中用 JSX 返回完整<ruby><rb>{c}</rb><rt>{p}</rt></ruby>，确保rt是ruby的直接子元素
若必须字符串注入（如 CMS 富文本），务必先用 DOMPurify.sanitize(html, { ALLOWED_TAGS: ['ruby', 'rb', 'rt', 'rp'] }) 过滤，禁用所有事件属性与 JS 执行上下文。
rt 样式失效或错位的常见 CSS 原因
rt 默认字号、行高、垂直对齐不继承父级，各引擎 baseline 计算逻辑不同。不干预就上线，Firefox 可能压字，Safari 留白过大，Chrome 换行脱节。
- 显式设置
rt { font-size: 12px; }，别依赖浏览器默认的 50% 缩放（Chrome 有时按 60%，Safari 按 45%） - 给
ruby设line-height: 1.8（至少比汉字行高大 0.6），防拼音贴底或重叠 - 加
rt { line-height: 1; vertical-align: text-top; }，统一垂直定位基准 - 禁用
rt { position: absolute; }或visibility: hidden—— 降级后拼音直接消失，且破坏无障碍识别 - 优先用
ruby-position: over（横排默认值），别用margin-top模拟上移，缩放/换字体时极易偏移
多音字、空格、标点混排时的硬性处理规则
ruby 不支持“一个 rt 对应多个 rb”，也不支持自动分词。语义对齐完全靠结构显式声明。
- “长”在“长度”中读
cháng，在“生长”中读zhǎng，必须手动拆开：<ruby><rb>长</rb><rt>cháng</rt></ruby>度vs生<ruby><rb>长</rb><rt>zhǎng</rt></ruby> - 注音含空格或标点（如“東・京”），
rt内必须保持相同分隔：<rt>とう・きょう</rt>，否则视觉错位 - 连续多个
ruby在 iOS Safari 上可能出现微小字间距异常，可用父容器设font-size: 0+ 子元素重设字号缓解 - 若拼音数据为空（如生僻字无标注），禁止输出空
<rt></rt>—— 部分屏幕阅读器会播报“空白注音”，造成干扰
真实项目里最常被忽略的是：结构完整性比样式美观更重要。一个没 rb 的 ruby，哪怕看着“像”，也已经丢了语义、可访问性和未来兼容性。
立即学习“前端免费学习笔记（深入）”；
