ruby 唯一不可替代的价值是语义正确性，而非视觉排版；必须显式书写 rb 标签、精确控制 rt 的 font-size 和 line-height，并避免将其当作样式工具使用。
ruby 标签在排版设计中没有“视觉优势”，它唯一不可替代的价值是语义正确性——浏览器、屏幕阅读器、打印引擎、缩放系统都依赖这个结构识别“哪个音对应哪个字”。想靠它实现美观排版，反而容易翻车。
为什么不能把 ruby 当作排版工具用
很多人一上来就写 <ruby>汉字<rt>hàn zì</rt></ruby>，结果 Safari 里拼音贴底、Chrome 里换行错位、Firefox 中被截断。这不是样式没调好，而是结构本身已丢失语义锚点：rb 缺失 → 浏览器无法确定“汉”和“字”各自对应的音节 → 渲染引擎降级为普通内联流处理。
-
ruby不是span+position: relative/absolute的替代品，它不接受 margin 模拟上标、不响应 font-size 百分比缩放 - 多字共用一个
rt（如<rt>chóng qìng</rt>）会导致屏幕阅读器一次性读出整段拼音，无法逐字聚焦 - 直接在
ruby上设display: inline-flex或line-height会破坏其内联基线计算，iOS Safari 尤其敏感
rb 必须显式写出，别信“可省略”的旧文档
HTML5 规范虽允许省略 rb，但 Chrome 115+、Safari 17.4+、Edge 116+ 已默认要求显式 <rb>重</rb><rt>chóng</rt>。否则：
- 连续多个
ruby块在 iOS 上间距异常（字间空隙变大或消失） - 安卓 WebView（尤其 Samsung Internet 24.x）会合并相邻
rt内容，出现“重chóngqìng庆”这类错乱 - 服务端渲染时若某字拼音为空，漏掉
rb会导致整个ruby块被忽略，而非仅跳过该字
rt 的样式必须用固定比例 + 强制重置
浏览器对 rt 的默认 font-size 计算逻辑完全不同：Chrome 用 50%，Firefox 用 60%，Safari 则按父元素 em 值再缩放一次。靠继承或百分比值必然失控。
- 必须写
rt { font-size: 0.65em; line-height: 1; }，不能只设font-size - 加
ruby { ruby-position: over; }比margin-top: -0.4em可靠得多——后者在用户放大字体或切换系统字号时立刻偏移 - 禁用
vertical-align：它的基准线是行高，不是基字中心；ruby-align: center才真正控制水平对齐
真正适合用 ruby 的场景其实很窄
它只适合静态、人工校对过、单字/词级、无障碍要求明确的注音，比如教材生字表、辞典词条、古诗逐字拼音（不含变调逻辑）。一旦涉及以下任一情况，就该换方案：
- 需要自动匹配轻声/儿化/变调（
ruby不解析拼音语义） - 要兼容 IE 或 Outlook 邮件客户端（它们完全忽略
rt，只留平铺文本） - 注音数据来自 API 动态注入（未过滤 XSS 的字符串拼接极易破坏 DOM 结构）
- 要求 TTS 朗读时能区分“重庆”读作
chóng qìng而非zhòng qìng（得靠aria-label补充）
复杂点在于：结构写对了，只是起点；真正难的是在不同 UA、不同缩放级别、不同字体栈下，让拼音始终对齐那个字——而这恰恰没法靠 CSS “一键解决”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
