多音字HTML标注的完整操作手册-html教程-PHP中文网

多音字必须人工判断语境后手动标注唯一读音，ruby仅负责呈现、不处理逻辑；需用rb明确基线、rt设具体字号，禁用absolute；动态生成须确保结构合规、避免XSS。

多音字html标注的完整操作手册

多音字在 HTML 中不能靠自动识别，必须人工判断语境后手动指定拼音；ruby 标签本身不处理读音逻辑，只负责把“你认定的读音”准确、可访问地呈现出来。

多音字必须按上下文逐字标注，不能合并或模糊写法

浏览器和屏幕阅读器无法从“否fǒu/pǐ”中知道该读哪个音，这种写法会破坏语义，也违背 W3C 规范对 rt 的“一对一”要求。

错误示例：否fǒu/pǐ —— 拼音混排，语音引擎跳过或朗读错误
正确做法：根据实际语境选唯一读音，如“否极泰来”中写 否pǐ
若需提示多音可能性（如教学场景），应在 ruby 外补充说明，或用 data-pinyin 属性备用：否pǐ

`rb` 不可省略，否则 Safari 和旧版 Edge 会错位

看似简洁的 长cháng 在 Safari 16 及更早版本中，rt 会失去基线锚点，导致拼音左贴、右飘甚至垂直偏移——因为 rb 是浏览器计算对齐位置的必要参照。

单字也必须显式包裹：长cháng
双音节词如“长大”，两个字读音不同，必须拆开：长zhǎng大dà
动态生成时（如 React/Vue），确保 rb 是 ruby 的直接子节点，中间不能插 Fragment 或空格

样式必须协同设置，否则 `ruby-align` 形同虚设

只写 ruby { ruby-align: center; } 不够，Safari 16 以下默认不生效，Chrome/Firefox 在 RTL 或 text-align: right 下也会失效；更常见的是拼音被截断或上下压叠，根源在 font-size 和 line-height 没配对。

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

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

下载

全局重置建议：ruby { ruby-align: center; -webkit-ruby-align: center; line-height: 1.2; }
rt 必须设具体字号：rt { font-size: 0.6em; line-height: 1.2; }（不用百分比，避免缩放偏差）
禁用 position: absolute 覆盖原生布局——它会让屏幕阅读器忽略 rt，且响应式下极易错位

动态生成时最容易踩的三个坑

用 pypinyin、pinyin-pro 等库批量加注，结构断裂比样式问题更致命。

汉字与拼音数量不一致：遇到 emoji、全角标点、组合字符（如「ā」）时，正则切分要严格，推荐用 re.findall(r'[\u4e00-\u9fff]+|[^\u4e00-\u9fff]+', text) 分块处理
v-html 或 dangerouslySetInnerHTML 直接拼字符串易 XSS，且会被转义：错误写法 v-html="`${char}${pinyin}`"
React 中必须是的**直接子节点**，不能包在或 Fragment 里，否则语义丢失