多音字必须人工指定读音并逐字用字音结构标注，禁止在单个中堆叠多个拼音，否则语音合成会误读；需用title或data-pinyin属性补充备选读音。
ruby 标签怎么写多音字拼音
直接用 <ruby></ruby> 包裹汉字，再用 <rt></rt> 放对应拼音，是标准解法。但多音字的关键不是“能不能标”，而是“标哪个读音”——浏览器不会自动判断语境，必须人工指定。
常见错误是把多个拼音堆在同一个 <rt></rt> 里，比如 <rt>zhǎng/cháng</rt>，这会导致语音朗读工具读成“zhǎng slash cháng”，失去语义。
- 每个汉字单独配一个
<ruby></ruby>块，哪怕相邻 - 拼音只写当前语境下实际读音，别写备选
- 如果真需提示多音，用
<title></title>或data-pinyin属性补充，而非塞进<rt></rt>
中文语境下 ruby 的浏览器兼容性现状
<ruby></ruby> 在 Chrome、Edge、Safari（macOS/iOS 15.4+）、Firefox 91+ 都支持，但 Safari 对嵌套或换行的 <rt></rt> 渲染不稳定；旧版 Android WebView（
这意味着：纯靠 <ruby></ruby> 做多音字教学页面，在低端安卓设备上可能完全看不到拼音。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 生产环境建议加降级样式：
ruby rt { font-size: 0.6em; }，确保即使未渲染也留出视觉空间 - 避免用
<rp></rp>包裹括号——多数屏幕阅读器忽略它，且现代浏览器已不需要 - 不要依赖
<ruby></ruby>实现语音切换功能，它只是标注，不是控制逻辑
如何配合 JavaScript 动态切换多音字读音
静态 HTML 无法响应用户点击切换拼音，得靠 JS 控制 textContent 或 innerHTML。核心思路是：每个汉字用唯一 id，对应多个预置拼音，点击时替换其父级 <rt></rt> 的内容。
<ruby id="zhang1"><rb>长</rb><rt>cháng</rt></ruby><button onclick="switchPinyin('zhang1', ['cháng', 'zhǎng'])">切换读音</button>
注意点：
-
<rb></rb>标签必须显式写出（不能省略），否则 JS 获取rb元素会失败 - 别用
document.querySelector('ruby rt')批量操作——多音字常并存，容易误改 - 切换后需手动触发
speechSynthesis.cancel()（如果用了 Web Speech API），否则旧语音可能叠加
ruby 标注和 aria-label / screen reader 的协作边界
屏幕阅读器对 <ruby></ruby> 的支持不统一：NVDA + Firefox 会读汉字+拼音，VoiceOver + Safari 默认只读汉字，除非开启“字符模式”。指望它自动读多音字是不可靠的。
真正可控的方式是：用 aria-label 覆盖整段文字的朗读内容，例如 <span aria-label="生长 zhǎng">生长</span>，而 <ruby></ruby> 仅作视觉辅助。
- 不要同时给
<ruby></ruby>和内部<rb></rb>加aria-label，会导致重复播报 - 如果页面有听力障碍用户需求，优先保证
aria-label准确，<ruby></ruby>是锦上添花 - 测试时务必关掉图形界面，纯靠键盘+读屏操作走一遍流程——很多“看起来正常”的标注，一开 VoiceOver 就失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
