ruby标签需显式包含rb元素才能正确渲染拼音，否则现代浏览器会降级处理；必须配合重置rt样式、人工校对多音字及口语化拼音，标点须置于ruby外。
ruby 标签本身不增强可读性，它只提供语义结构；真正起作用的是正确包裹 + 合理 CSS + 人工校对的组合。浏览器不会自动给汉字加拼音，也不会判断多音字——所有“可读性提升”都依赖你写的结构是否合法、样式是否稳定、内容是否准确。
为什么 ruby 结构不写 rb 就大概率失效
现代浏览器（Chrome 115+、Safari 17.4+、Firefox 115+）对缺失 rb 的 ruby 会降级处理：可能把 rt 当作普通内联文本渲染在基字右侧，甚至完全忽略。这不是 bug，是规范要求——rb 是语义锚点，告诉浏览器“这个音对应哪个字”。
- 错误写法：
<ruby>重<rt>chóng</rt></ruby>→ “重”字右边冒出“chóng”，或被截断 - 正确写法：
<ruby><rb>重</rb><rt>chóng</rt></ruby>→ 拼音精准浮在“重”上方 - 兼容性兜底：
rb显式声明比纯文本更稳妥，尤其在旧版 Android WebView 中
rt 样式必须重置，否则在 Safari/Firefox 中错位严重
各浏览器对 rt 的默认渲染差异极大：Chrome 可能缩放得刚好，Firefox 把它拉高撑开行距，Safari 则可能垂直偏移、字体不缩放。不设 CSS，基本等于没标。
- 必加样式：
ruby rt { font-size: 0.6em; line-height: 1; } - 防错位补充：
ruby { line-height: 1.8; }（避免拼音贴底或和下一行重叠） - 禁用
vertical-align: super或position: absolute—— 它们破坏原生对齐逻辑，缩放时立刻偏移 - 不要给
ruby设width或margin，它不是块级容器，强行干预会触发流式布局异常
多音字、轻声、儿化音不能靠自动工具，必须人工干预
ruby 不解析语义，只呈现你给的内容。一个“长”字，<rt>cháng</rt> 和 <rt>zhǎng</rt> 都合法，但读错就失去可读性意义。
- 轻声必须去掉声调符号：如“妈妈”标为
<rt>mā ma</rt>，不是mā mā或mā má - “一”“不”变调按实际读音写：
<rt>yí wàn</rt>（一万），不是yī wàn - 儿化音统一用
ér：如“花儿”写<rt>huā ér</rt>，不是huār（后者在多数屏幕阅读器中会被误读为单音节） - 标点符号不能进
ruby：逗号、句号、引号必须放在ruby外，否则朗读顺序错乱、TTS 工具跳过
最容易被忽略的点：拼音里的空格和声调符号必须严格匹配口语习惯，而不是字典拼写。比如“我们”读 wǒ men，不是 wǒ mén；“小孩儿”是 xiǎo hái ér，不是 xiǎo háir。这些细节不靠人工核对，ruby 再标准也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
