ruby注音不显示的最常见原因是未用rb标签包裹被注音字；正确结构必须为<ruby><rb>字</rb><rt>音</rt></ruby>，多字词须一字一ruby，且需固定line-height和font-size避免裁剪。
必须手动逐字包裹，ruby 不会自动识别汉字或查字典——写错结构或漏标签，注音就直接不显示。
为什么写了 ruby 却没看到拼音
最常见原因是没用 rb 显式包裹被注音字。现代浏览器（Chrome/Safari）会宽容处理 <ruby>汉<rt>hàn</rt></ruby>，但 Firefox 和 Edge 严格遵循标准：没有 rb，就不触发注音渲染逻辑，rt 内容会被当成普通内联文本流排版，贴在汉字后面，毫无上标效果。
正确结构只有一种：<ruby><rb>汉</rb><rt>hàn</rt></ruby>
- 漏掉
rb→ 注音消失（不是“不兼容”，是规范未满足） - 把拼音塞进
ruby开始标签后、rb前 → 如<ruby>汉hàn<rt>hàn</rt></ruby>→ “hàn”被当正文，不参与注音布局 - 写成
<rtt>或<RT>→ 标签名大小写敏感或拼错，浏览器忽略
多字生僻词怎么写才不乱套
“饕餮”“龘靐齉”这类词绝不能合并进一个 ruby。浏览器无法按字宽对齐拼音，缩放、换行、字体切换时，rt 会整体漂移，彻底脱钩。
立即学习“前端免费学习笔记（深入）”；
必须一字一 ruby，且每个都带 rb：
<ruby><rb>饕</rb><rt>tāo</rt></ruby><ruby><rb>餮</rb><rt>tiè</rt></ruby> <ruby><rb>龘</rb><rt>dá</rt></ruby><ruby><rb>靐</rb><rt>bīng</rt></ruby><ruby><rb>齉</rb><rt>nàng</rt></ruby>
- 禁用：
<ruby><rb>饕餮</rb><rt>tāo tiè</rt></ruby>（错位风险高） - 混排英文/数字时，只给汉字套：
<ruby><rb>第</rb><rt>dì</rt></ruby>123<ruby><rb>页</rb><rt>yè</rt></ruby> - 多音字需拆开并靠上下文区分：
<ruby><rb>长</rb><rt>zhǎng</rt></ruby>大 <ruby><rb>长</rb><rt>cháng</rt></ruby>度
注音显示被裁剪或挤成一团怎么办
根本原因是 ruby 和 rt 的默认 line-height 与 font-size 在各浏览器中计算不一致，尤其缩放后顶部常被截断。
可靠解法是放弃百分比，用固定像素控制：
ruby {
line-height: 1.8;
white-space: nowrap; /* 防止单个 ruby 被换行打断 */
}
rt {
font-size: 12px;
line-height: 1.2;
color: #666;
}- 不要用
position: absolute强行定位rt→ 破坏可访问性与响应式行为 - 避免父容器设
line-height: 1→ 会压缩ruby内部垂直空间 - 声调字符优先用预组合形式（如
ā），不用组合符（ā），后者在 Safari 或某些字体下易偏移
想自动转拼音，绕不开 JavaScript
ruby 是纯语义容器，和 div 一样不带逻辑。输入“彧”要输出“yù”，必须依赖 JS 库。
目前最稳的是 pinyin-pro（支持 Unicode 15.1 + 扩展汉字库）：
import { html } from 'pinyin-pro';
const str = html('彧', { toneType: 'symbol' });
// → <ruby><rb>彧</rb><rp>(</rp><rt class="pinyin">yù</rt><rp>)</rp></ruby>- 异读字（如“叶公好龙”的“叶”）需手动传
polyphonic: true并配合词典校准 - 服务端渲染（SSR）需确保 Node.js ≥ 18，且启用
globalThis.TextEncoder - IE11 或旧安卓 WebView 兼容需保留
rp，否则括号降级失效
真正容易被忽略的，是哪怕结构、拼音、样式全对了，只要 rb 缺失或 rt 位置松动，屏幕阅读器就读不准——可访问性不是锦上添花，而是 ruby 存在的前提。
