ruby 标签在多语言拼音标注中需严格遵循规范：必须配 rt 才能渲染，rp 仅用于老浏览器兜底且须在 rt 内，lang 和 bdi 必须协同控制语音与方向，样式需手动精确设置。
ruby 标签在多语言拼音标注中不是“写了就显示”，而是高度依赖浏览器对 rt 的解析、rp 的 fallback 行为，以及 lang 和 bdi 的协同配合。不按规范写，中文注音可能完全不出现，或在 Chrome/Safari 上呈现截然不同的视觉效果。
ruby 必须配 rt 才能渲染，否则注音消失
只写 <ruby>汉</ruby> 是无效的——浏览器会忽略整个注音逻辑，文字照常显示，但拼音不会浮现。必须让每个基字（或词）紧跟着一个 rt 元素：
-
<ruby>汉<rt>hàn</rt></ruby>✅ 正确结构，拼音出现在“汉”上方 -
<ruby>汉字<rt>hàn zì</rt></ruby>✅ 支持整词注音，但多音字/语义分隔时易错位 -
<ruby>重<rt>chóng</rt></ruby><ruby>庆<rt>qìng</rt></ruby>✅ 推荐逐字包裹，避免“重庆”被误读为zhòng qìng - 禁止
<ruby>汉</ruby><rt>hàn</rt>——rt脱离ruby父容器，被完全忽略
rp 标签不是装饰，位置和内容有硬约束
rp 唯一作用是给不支持 ruby 的老浏览器（如 IE ≤10、旧 Firefox）提供括号兜底，比如显示“汉(hàn)”。但它在现代浏览器中必须被隐藏，否则 Chrome 会把括号渲染出来，Safari 却不显示——同一段 HTML 在两个浏览器里视觉完全不同。
- 正确写法：
<rt><rp>(</rp>hàn<rp>)</rp></rt>——rp必须在rt内部，且内容只能是纯括号字符，不能有空格或字母 - 错误写法：
<rp>(</rp><rt>hàn</rt><rp>)</rp>——rp在rt外，被浏览器忽略 - 错误写法：
<rt><rp>( </rp>hàn</rt>——rp含空格，部分浏览器不触发 fallback - 最稳方案：服务端根据 UA 判断是否为 Blink/WebKit 内核（Chrome/Edge/Safari），直接移除
rp；次选方案用 CSS 强制隐藏：ruby rt rp { display: none !important; }
lang 和 bdi 必须配合 ruby 使用，否则多语言混排会错乱
当拼音与阿拉伯文、希伯来文或日文混排时，仅靠 ruby 不足以保证方向和语音正确。例如“أحمد <ruby>李<rt>lǐ</rt></ruby>”，若不包裹 bdi，英文拼音可能被 RTL 上下文拖拽错位；若不设 lang="zh-Hans"，屏幕阅读器可能用日语引擎读“lǐ”。
-
<p lang="ar">مرحبا <bdi><ruby>李<rt>lǐ</rt></ruby></bdi></p>——bdi隔离方向，lang指定语音规则 - 禁止给
bdi加dir属性：<bdi dir="auto"></bdi>是冗余的，bdi默认就是dir="auto"且带unicode-bidi: isolate -
:lang(zh-Hans)比[lang="zh-Hans"]更适合嵌套场景，它能匹配任意祖先含该语言声明的元素，避免漏样式 - 不要用
dir="auto"替代bdi：遇到纯数字或空格开头的字符串（如"123@example.com"），dir="auto"会 fallback 到 LTR，而bdi仍能隔离
字体与对齐必须手动控制，不能依赖默认值
不同浏览器对 rt 的默认字号、行高、垂直对齐差异极大：Safari 渲染偏高，Firefox 偏低，移动端小屏极易截断或错位。百分比缩放（如 font-size: 70%）在各浏览器中计算基准不一致，不可靠。
- 推荐写法：
rt { font-size: 12px; line-height: 1; vertical-align: text-top; } - 避免给
ruby设display: inline-block—— 会破坏行内流，导致换行或间距异常 - 父容器需设足够
line-height或min-height，尤其在font-size小于 14px 时，防止注音被裁切 - 不要用
position: absolute覆盖原生布局 —— 会破坏可访问性，且响应式失效
真正麻烦的从来不是标签怎么写，而是拼音数据从哪来、多音字如何选、CMS 或 Markdown 编辑器能否安全注入 ruby 结构——这些环节一旦没设计好，前端再规范也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
