+是唯一符合语义、屏幕阅读器可读、主流博客平台无缝支持的多音字注音方案；其他方式存在兼容性、可访问性或编辑器过滤问题，且需注意嵌套规范、浏览器支持底线、CSS重置及人工校验语境。
直接用 <ruby></ruby> + <rt></rt> 是唯一符合语义、能被屏幕阅读器识别、且在主流博客平台（如 Hexo、Hugo、WordPress 的纯 HTML 编辑模式）中真正“无缝”的方案。其他方式要么破坏排版，要么无法读取，要么被富文本编辑器自动过滤。
为什么不能用 title 属性或 CSS 伪元素
很多人试过给多音字加 title（比如 <span title="zhāo">朝</span>），但这是无效的：鼠标悬停才触发，移动端无响应，屏幕阅读器默认不朗读 title；用 ::after 叠加拼音会脱离文档流，导致换行错位、复制时拼音丢失、打印样式崩溃。更关键的是——大多数博客后台（尤其是带可视化编辑器的）会主动删掉 title 或拒绝渲染自定义 CSS 伪元素。
<ruby></ruby> 的写法和浏览器兼容底线
标准写法必须严格遵循嵌套结构：<ruby>朝<rt>zhāo</rt></ruby>。注意三点：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
<rt></rt>必须紧贴在要注音的文字之后，中间不能有空格或换行，否则 Safari 会忽略注音 - Chrome / Edge / Firefox 当前均原生支持，无需 polyfill；Safari 自 iOS 15.4+、macOS 12.3+ 起已稳定支持，旧版本会退化为仅显示汉字（安全降级）
- WordPress 的经典编辑器或 Code Block 插件可直接粘贴；Hexo 需确保 markdown 渲染器（如 marked）未开启
sanitize，否则会过滤<ruby></ruby>
批量处理多音字时容易漏掉的细节
手动一个个加 <ruby></ruby> 效率低，用脚本替换也常翻车：
立即学习“前端免费学习笔记（深入）”；
- 避免匹配到 HTML 标签里的文字（比如
<div class="chao"> 中的 “chao”），正则建议加边界断言：<code>/\b(朝|长|行|发)\b/g - 同一个字在不同语境读音不同（如 “行” 在 “银行” 读
yíng，在 “行走” 读xíng），无法全自动判断，必须人工校验上下文 - 部分博客主题 CSS 会重置
ruby样式（比如设ruby { display: inline-block; }），导致注音错位，需额外加ruby { display: ruby; }覆盖
最麻烦的其实是语义对齐——<ruby></ruby> 注音只解决“怎么读”，不解决“为什么读这个音”。真要讲透，还得在注音后紧跟简短说明，比如 <ruby>朝<rt>zhāo</rt></ruby>（清晨义，非“朝代”之“cháo”），这部分没法自动化，得人盯。
