古文多音字注音须依语义定音并辅以训诂说明，如“骑”在《木兰诗》中读qí因表跨马动作；HTML中应结合与title或aria-label标注义项，避免堆砌读音、误标通假字形音，并兼顾可访问性与浏览器兼容性。
HTML 里给古文多音字加注音，不能只靠 <ruby></ruby> 硬套，得区分“该读什么”和“为什么读这个”——否则注音就成摆设，甚至误导理解。
多音字注音必须绑定语义上下文
古文多音字（如“骑”“裳”“骑”在《木兰诗》中读 qí，“裳”读 cháng）不是按字选音，而是按词义定音。HTML 中若只写 <ruby>骑<rt>qí</rt></ruby>，没说明“此处指‘跨马动作’而非‘骑兵’”，读者仍可能混淆。
- 注音前先查证：优先依据《汉语大字典》《汉语大词典》的义项标注，而非《现代汉语词典》的通用读音
- 用
title属性补充释义，例如：<ruby>骑<rt>qí</rt></ruby><span title="跨马而行的动作"></span> - 避免在同一个字上堆砌多个
<rt></rt>（如“qí/jì”），这违反“一义一音”原则，也破坏屏幕阅读器体验
通假字注音要标本字+本音，不能标通假字形音
“蚤”通“早”、“信”通“伸”，这类字在 HTML 中若按字形注 zǎo、xìn，等于把错误读音固化下来。正确做法是明确标出“这里实际是‘早’字，应读 zǎo”，而不是“‘蚤’读 zǎo”。
- 结构建议：
<ruby>蚤<rt>（通“早”）zǎo</rt></ruby>，括号和空格用纯文本，不嵌套标签 - 不要用
<data value="zao">蚤</data>这类隐藏音标——语义丢失，且无法被语音朗读工具识别 - 若需机器可读，可用
aria-label="蚤，通假字，同‘早’，读 zǎo"辅助，但不可替代视觉注音
兼容性与可访问性绕不开 <ruby></ruby> 的局限
<ruby></ruby> 在 Chrome/Firefox/Edge 中渲染稳定，但在 Safari（尤其 iOS 16 及更早）对多音字嵌套支持差，<rt></rt> 容易错位或被截断；更重要的是，NVDA、VoiceOver 对连续多个 <ruby></ruby> 的朗读顺序不可控，常跳过 <rt></rt>。
立即学习“前端免费学习笔记（深入）”；
- 底线方案：用
<span class="phonetic">骑<span class="pinyin">qí</span></span>+ CSS 控制位置，牺牲一点语义换稳定性 - 必须保留语义时，每个
<ruby></ruby>后紧跟一个<span aria-hidden="true">（动词，跨马）</span>，供读屏器抓取 - 禁用
font-size: 0.5em强制缩放<rt></rt>——它会让部分 Android TalkBack 把注音当乱码跳过
真正难的不是怎么标，而是判断哪个音义组合在当前语境下成立。比如“骑”在“胡骑”中读 jì（名词，骑兵），但在“单于骑”中读 qí（动词，骑乘）。这种差异必须靠训诂支撑，HTML 只是呈现出口——别让前端实现掩盖了考据缺口。
