必须用标签而非span+CSS或图片，因其原生支持可访问性、缩放对齐与无样式识别；多音字须按语境唯一标注，严禁一rt多音，且需考据读音依据。

直接用 <ruby></ruby> + <rt></rt> 标注最可靠，别用 CSS 模拟或图片——否则屏幕阅读器读不出、打印丢失、语义不明确。

为什么必须用 <ruby></ruby> 而不是 span + CSS

文言文试题里的多音字（如“降”在“受降城”中读 xiáng，“夫”在“夫君子之行”中读 fú）需要同时满足三个条件：可被语音合成器准确朗读、能随字体缩放保持对齐、在无样式环境下仍可识别。用 span 套两层再加 position: relative 会破坏可访问性；纯图片标注则无法复制、搜索、适配深色模式。而 <ruby></ruby> 是 HTML5 原生语义标签，浏览器和读屏软件默认支持其结构逻辑。

<ruby></ruby> 的写法必须严格一对一

多音字标注最常踩的坑是把多个读音塞进一个 <rt></rt>，比如写成 <ruby>降<rt>jiàng/xiáng</rt></ruby>。这会让语音合成器困惑，也违背“注音即释义”原则——读音不同，语义往往不同。

• 正确写法是按上下文唯一确定读音后，只标一个：<ruby>降<rt>xiáng</rt></ruby>（对应“接受投降”义）
• 若试题本身要求对比多音（如考题括号填空），应在题干文字外另加说明，例如：<p>“受<ruby>降<rt>xiáng</rt></ruby>城”的“降”读作______</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a> <p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p> </div> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
• 不要用 <rp></rp> 包裹斜杠或括号——现代浏览器已无需降级，反而可能干扰朗读节奏

配合试题排版的 CSS 微调要点

默认 <rt></rt> 显示在汉字正上方，但试卷 PDF 导出或小字号印刷时容易重叠。需针对性控制：

• 缩小注音字号但不改变行高：rt { font-size: 0.65em; line-height: 1; }
• 避免拼音贴得太近汉字：ruby { line-height: 2; }（注意不是设在 rt 上）
• 若试卷为竖排（如仿古卷），需强制横排拼音：rt { writing-mode: horizontal-tb; }，否则拼音会侧躺，影响识别
• 禁用 transform: translateY() 或 margin-top 调位置——会脱离文档流，导致打印错位或响应式失准

试题系统里动态渲染多音字要防什么

如果用 JavaScript 动态插入标注（比如从 JSON 题库生成页面），注意两个边界情况：

• innerHTML 直接写 <ruby>...</ruby> 可能被浏览器解析失败，建议用 document.createElement('ruby') + appendChild 构建节点
• 遇到带标点的多音字组合（如“否．极泰来”），确保 <ruby></ruby> 只包裹汉字本身，标点独立在外，否则标点会被一起上标
• 试卷导出为 PDF 时，某些工具（如 wkhtmltopdf）对 <ruby></ruby> 支持不全，建议导出前用 CSS 添加备用属性：<ruby data-pinyin="pǐ">否<rt>pǐ</rt></ruby>，供后端提取 fallback

真正难的不是写对标签，而是每个 <rt></rt> 都得经得起考据——比如“衰”在“鬓毛衰”里标 shuāi 还是 cuī，得看命题依据的是《普通话异读词审音表》还是教学传统。技术只是载体，音义判断才是不可绕过的前提。