最稳妥的单字拼音旁注是用 ruby 标签逐字包裹，rt 放 Unicode 声调拼音，rp 成对包裹作降级，CSS 重置 font-size、line-height 和 text-align 确保跨浏览器一致。
用 ruby 标签做单字拼音旁注最稳妥
直接用 ruby 包汉字、rt 放拼音，是语义正确、浏览器原生支持、无障碍友好的做法。它不是“加样式”，而是声明「这个字读什么」——屏幕阅读器能识别，打印时结构保留，也不依赖 JS。
常见错误是把整句拼音塞进一个 rt 里，比如：<ruby>你好<rt>nǐ hǎo</rt></ruby>。这会导致拼音浮在两个字上方，位置错乱，且语义失效（浏览器无法判断哪个拼音对应哪个字）。
- 每个汉字必须独立包裹一层
ruby：如<ruby>你<rt>nǐ</rt></ruby><ruby>好<rt>hǎo</rt></ruby> - 拼音必须用 Unicode 声调符（如
nǐ），不能用数字式（如ni3），否则字体不支持时显示异常 - 避免在
ruby内混用普通文本和rb：如<ruby>中<rb>国</rb><rt>guó</rt></ruby>中的“中”不会被标注
rp 标签不是可选项，而是降级刚需
不加 rp，老浏览器（如旧版 Safari、部分安卓 WebView）会把 rt 当普通内联文本渲染，结果变成「汉hàn字zì」，完全破坏可读性。加上 rp 后，它们会显示为「汉(hàn)字(zì)」，视觉上仍可接受。
标准写法是成对使用 rp 包裹 rt，现代浏览器自动隐藏 rp 内容，只显示拼音；旧环境则显示括号包裹形式。
立即学习“前端免费学习笔记（深入）”；
- 正确结构：
<ruby>汉<rp>(</rp><rt>hàn</rt><rp>)</rp></ruby> -
rp必须成对出现，且紧邻rt，顺序不能颠倒 - 不要省略
rp仅为了“代码简洁”——兼容性损失远大于维护成本
CSS 重置 rt 样式才能跨浏览器一致
rt 在 Chrome/Firefox 默认是小号、上标、灰色；Safari 却可能不缩放、垂直偏移、甚至不居中。这不是 bug，而是规范允许浏览器自由实现渲染逻辑。想让拼音稳稳贴在字上方，必须手动重置关键样式。
- 必设
font-size：建议0.6em–0.75em，太小看不清，太大压字 - 必须设
line-height: 1：否则行高撑开，拼音被顶高 - 加
text-align: center确保水平居中，尤其对宽字符（如「龍」「龜」）有效 - 别用
vertical-align: super：它基于行高计算偏移，不是相对于基字，容易错位
最小可用 CSS：ruby rt { font-size: 0.7em; line-height: 1; text-align: center; }
多音字、词组、混合内容要人工拆分
ruby 不解析语义，也不做变调处理。它只负责把 rt 对齐到最近的基字（rb 或纯文本）。所以「长」在「长大」和「长度」中读音不同，必须靠人工判断并分别标注。
- 多音字必须单字独立
ruby：如「长」→<ruby>长<rt>zhǎng</rt></ruby>和<ruby>长<rt>cháng</rt></ruby>是两套代码 - 词组不能靠 JS 自动切分：用
.split('')会切坏 emoji 或组合字符，应改用Array.from('你好') - 中英文混排时，非汉字内容不包
ruby：如「React是框架」，避免把英文当基字处理
真正难的不是写对标签，而是校对——每个字的声调、轻声、儿化、变调，都得人工确认。机器生成的拼音（如 jpinyin）只能作初稿，不能直接上线。
