标注多音字必须严格遵循一对一规则，与须紧邻且不可嵌套其他标签；多音字需拆分为独立块；移动端需重置line-height等样式；微信X5内核及屏幕阅读器兼容性差，建议降级为括号注音或abbr方案。
用
浏览器对 的解析非常严格：如果 不成对紧邻，或中间插入了 、 等标签，Chrome/Firefox 会直接忽略整组标注，不渲染拼音也不报错。
正确写法必须是：
<ruby>长<rt>zhǎng</rt></ruby>
错误写法示例（常见）：
-
长→ 拼音消失 -
长→ 只渲染第一个 -
长→在现代浏览器中已基本失效，且干扰语义
多音字需拆成多个独立
一个 元素只支持一对一映射（一个基字对应一个注音）。遇到“行”在“银行”和“行走”中读音不同，必须分开写：
<ruby>银<rt>yín</rt></ruby><ruby>行<rt>háng</rt></ruby><ruby>行<rt>xíng</rt></ruby><ruby>走<rt>zǒu</rt></ruby>
如果强行合并：银行行走，结果是全部基字共享同一串拼音，语义完全错乱。
注意： 不支持空格对齐，所以多字连用时建议用 或 CSS letter-spacing 微调视觉间距，避免拼音挤在一起。
移动端 Safari 对
iOS 16+ 虽已支持 ，但默认行高容易导致拼音贴顶或下沉，尤其在字号小于 14px 时。最稳妥的修复方式是显式重置：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
ruby { line-height: 1.2; }<br>rt { line-height: 1; font-size: 0.6em; }<br>rb { display: inline-block; }
不要依赖 vertical-align: super —— 它在 Safari 中对 无效；也不要设 ruby { font-size: 0.9em }，这会同时缩放基字和拼音，破坏可读性。
额外提醒：微信内置浏览器（X5 内核）至今不支持 ，如需兼容，得 fallback 到括号注音（如“银行(háng)”），并用 JS 检测 document.createElement('ruby').tagName === 'RUBY' 动态替换。
NVDA、VoiceOver 对 的朗读行为不一致：有的跳过 ，有的把拼音和汉字连读（如“长zhǎng”），有的甚至重复播报两次。目前没有跨平台稳定方案。
若内容面向听障弱视用户，更推荐语义化替代方案：
- 用
长+ CSS 隐藏 title（仅视觉显示拼音） - 在
长外包一层强制隔离朗读上下文 - 对关键教学文本，直接补充一行小号拼音文字（非
），用aria-hidden="true"隐藏给读屏器
真正需要语音准确性的场景， 还不能当作无障碍主力方案，这点容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
