HTML原生多音字注音用ruby标签，需rb包汉字、rt包拼音且成对出现；多字须分ruby包裹；兼容IE需title或JS降级；iOS Safari注意line-height。

用 ruby 标签实现基础多音字注音

HTML 原生支持多音字标注，核心就是 ruby 元素。它不是 JS 库或 CSS 技巧，而是语义化标签，浏览器原生渲染为小号拼音（或日文假名），且对屏幕阅读器友好。

基本结构是：ruby 包裹汉字，rb 放汉字，rt 放拼音——注意 rb 和 rt 必须成对出现，且顺序不能颠倒：

<ruby><rb>长</rb><rt>zhǎng</rt></ruby>

常见错误是把拼音直接写在 ruby 里（如 长zhǎng），这会导致“长”字被忽略；或者漏写 rb，让浏览器无法关联字与音。

多个多音字连续出现时的结构处理

连续多个字需要分别注音时，不能共用一个 ruby 标签，否则拼音会堆叠或错位。每个字（或词）应独立包裹：

<ruby><rb>行</rb><rt>xíng</rt></ruby><ruby><rb>不</rb><rt>bù</rt></ruby><ruby><rb>可</rb><rt>kě</rt></ruby>

如果强行合并：行不可xíng bù kě，多数浏览器会把拼音整体居中对齐到“行不可”三字下方，失去逐字对应关系。

另外，ruby 不支持嵌套，也不能放在 span 或 strong 内部再加样式——需靠外部 class 控制字体大小或颜色。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

兼容性与 fallback 方案

现代浏览器（Chrome 5、Firefox 38、Safari 5、Edge 12+）都支持 ruby，但老版本 IE 完全不识别，会直接忽略标签，只显示汉字——这对多音字页面是致命问题。

必须提供降级方案：

• 用 title 属性补充拼音：长，鼠标悬停可见
• 在 ruby 外层加 span 并设置 data-pinyin="zhǎng"，用 JS 检测 ruby 是否生效，未生效时动态插入括号拼音（如“长(zhǎng)”）
• 避免依赖 CSS 的 ruby-position 等新属性，它们在 Safari 中支持不稳定

特别注意：iOS Safari 对 ruby 的行高控制较弱，若父容器 line-height 过小，rt 可能被截断，建议显式设置 ruby { line-height: 1.4; }。

动态注入多音字注音的 JS 注意点

如果用 JS 批量添加注音（比如从 JSON 配置生成），关键不是拼 DOM 字符串，而是确保节点结构合法：

• 必须创建 ruby、rb、rt 三个元素，不能只用 innerHTML = '...' 后追加——部分浏览器解析时会自动闭合，破坏嵌套
• 不要用 document.write()，它会清空整个页面
• 注音数据里含空格或连字符（如 “bù kě” 或 “yīng-yǔ”）要原样保留，rt 内容不参与 HTML 转义
• 若原文含 HTML 标签（如 重点），先提取纯文本再注音，否则 rb 里塞进标签会导致结构混乱

最稳妥的方式是遍历文本节点，对匹配到的关键词（如“长”“行”“好”）逐个替换为 ruby 结构，而不是整段替换。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！