HTML中ruby与rt标签添加注音的方法

ruby 和 rt 必须配合 rb 才能正确渲染拼音，漏掉 rb 或结构错误会导致浏览器忽略注音或平铺显示；现代浏览器要求每个汉字用单独 rb 包裹，rt 紧跟对应 rb，多字需逐字拆分，禁用破坏流式布局的 CSS。

ruby 和 rt 不是“加个标签就能出拼音”的快捷工具，必须配合 rb 才能稳定渲染；漏掉 rb 或结构错位，多数浏览器会直接忽略注音，或把拼音平铺在汉字后面。

为什么写了 ruby + rt 却不显示拼音？

常见原因是没写 rb ——现代浏览器（包括 Chrome 120+、Firefox 125+、Safari 17+）已要求显式包裹基字。只写 <ruby>汉<rt>hàn</rt></ruby> 是无效结构，会被降级为纯文本“汉hàn”。

• rb 必须存在，且每个被注音汉字都要单独包裹：<rb>汉</rb><rt>hàn</rt>
• rt 必须紧跟对应 rb，不能跨 rb 混用，也不能放在 rb 外面
• 父容器若设了 line-height: 1 或 overflow: hidden，rt 很容易被裁掉或压进基字里

多字注音必须逐字拆开，不能偷懒合写

像“苹果”写成 <ruby><rb>苹</rb><rt>píng</rt><rb>果</rb><rt>guǒ</rt></ruby> 才可靠；塞进一个 rb 里（如 <rb>苹果</rb><rt>píng guǒ</rt>）会导致拼音整体浮在两字上方，换行、缩放、字体变化时极易错位。

• 地名、多音字（如“重庆”读 chóng qìng）必须按字控制，ruby 不会自动识别语境
• 中文混排数字/英文时更危险，例如「第123页」——123 若被折到下一行，其 rt 还挂在上一行末尾，视觉完全脱节
• 避免用空格分隔拼音：<rt>píng guǒ</rt> 改为 <rt>píng</rt><rt>guǒ</rt> 并各自配 rb

CSS 调整必须克制，别动默认流式布局

浏览器对 ruby 的内置排版逻辑（如 rt 自动缩小、垂直定位）很精细，强行用 position: absolute 或 display: inline-block 会破坏可访问性，也让屏幕阅读器无法正确朗读“汉字, 拼音”顺序。

立即学习“前端免费学习笔记（深入）”；

• 安全写法：ruby { line-height: 1.8; } + rt { font-size: 12px; line-height: 1; }
• 禁用 vertical-align 相关设置，改用 ruby { ruby-align: center; } 控制水平对齐
• 想让拼音在下方显示（如方言训读），用 ruby { ruby-position: under; }，别手动翻转
• 不要给 ruby 设 white-space: nowrap——长注音超出容器时不会折行，反而造成横向溢出

兼容旧浏览器和无障碍的底线操作

IE ≤ 10、Android 4.3 WebView、Outlook Desktop 等环境完全不解析 ruby，但它们通常会把 rt 内容当普通文本渲染出来，变成“汉hàn”这种不可读形式。靠 rp 加括号只是辅助，真正要保底，得从数据层控制。

• 服务端或构建时若拼音为空，绝不能输出空 <rt></rt>——部分读屏软件会读“空白注音”
• 需要支持老环境时，rp 必须严格嵌套在 rt 内：<rt><rp>(</rp>hàn<rp>)</rp></rt>，括号外不能有空格或文字
• 英文缩写、术语解释等场景请用 abbr[title]，ruby 语义仅限东亚文字注音，滥用会导致 SEO 和无障碍审查失败

最常被忽略的是：连续多个 ruby 块在 Safari 中可能间距异常，微调时得用 font-size: 0 父容器 + 子元素重设字号，而不是硬调 margin。