现代浏览器要求ruby注音必须显式使用标签包裹每个被注音字符，且须为直接子元素并紧邻；多字需分多个；混排时需配合和lang属性确保方向与语音正确。
ruby必须显式包含和
现代浏览器（Chrome 120+、Firefox 125+、Safari 17+）已将<rb></rb>视为硬性结构组件，不是可选标签。只写<ruby>汉<rt>hàn</rt></ruby>会被降级为纯文本“汉hàn”，<rt></rt>内容不会上标缩放。
正确结构必须是：<ruby><rb>汉</rb><rt>hàn</rt></ruby>。其中：
-
<rb></rb>必须包裹每一个被注音字符（含空格、数字、英文、emoji、全角标点） -
<rt></rt>必须是<ruby></ruby>的直接子元素，且紧贴对应<rb></rb>后（中间不能有换行、空格或其它标签） - 多字必须拆成多个
<ruby></ruby>，例如“重庆”要写成<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>
rt标签不是“显示拼音的容器”，而是语义触发器
<rt></rt>本身不决定样式，它唯一作用是向浏览器声明：“此处存在注音内容”。是否渲染、如何缩放、是否上标，完全由浏览器根据规范自主实现——Chrome/Firefox 默认小号+上标+灰色，Safari 则可能不缩放、垂直偏移异常。
想获得一致效果，必须手动重置 CSS：
- 强制设置
font-size（推荐0.6em～0.75em） - 控制
line-height避免撑开行距 - 用
text-align: center确保水平居中 - 禁用
<rp></rp>时，加ruby rt rp { display: none !important; }防 Chrome 渲染括号
浏览器解析失败的典型错误模式
常见写法看似合理，实则破坏 DOM 结构，导致注音完全不出现或语义错乱：
-
<ruby>汉字<rt>hàn zì</rt></ruby>：基字为两个字符，<rt></rt>无法对齐，屏幕阅读器无法分别播报 -
<ruby><rb>汉</rb></ruby><rt>hàn</rt>：<rt></rt>脱离父容器，被完全忽略 -
<rt><rp>( </rp>hàn</rt>：<rp></rp>含空格，部分浏览器不触发 fallback -
<ruby><rb>A1</rb><rt>1</rt></ruby>：英文字符“A”未参与注音结构，<rb></rb>与<rt></rt>数量不等，整段注音链断裂
lang和bdi是混排场景下不可省略的协同标签
当拼音与阿拉伯文、希伯来文或日文混排时，仅靠<ruby></ruby>无法保证方向与语音正确。例如<p lang="ar">أحمد <ruby><rb>李</rb><rt>lǐ</rt></ruby></p>中，若不加<bdi></bdi>隔离，拼音可能被 RTL 上下文拖拽错位；若不设lang="zh-Hans"，屏幕阅读器可能用日语引擎读“lǐ”。
稳妥写法是：<p lang="ar">أحمد <bdi><ruby><rb>李</rb><rt>lǐ</rt></ruby></bdi></p>。注意：<bdi></bdi>默认dir="auto"，禁止再写dir属性。
最易被忽略的是<rb></rb>的强制性——它不是语法糖，而是现代浏览器渲染拼音的硬性前提；另外，所有非汉字字符都得参与结构包裹，否则整段注音链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
