多音字必须人工判断上下文后指定唯一拼音，如“长”在“长度”中读cháng、“成长”中读zhǎng；不能合并标注（如cháng/zhǎng），须严格一一映射到对应汉字，并显式设置CSS确保渲染正确。
多音字必须人工判断上下文再选拼音
浏览器和ruby标签本身不做语义分析，不会根据前后字自动切换读音。比如“长”在“长度”中读cháng，在“成长”中读zhǎng，你得自己查证并填入对应拼音。不能写成长——这会让语音合成器朗读混乱，也违反 W3C 语义要求。
常见踩坑点：
- 依赖 pypinyin 默认结果，没校验上下文（如“发”在“发现”里读
fā，在“理发”里读fà） - 把多音字列表式堆在同一个
里，用斜杠或顿号分隔 - 用
data-pinyin属性存备用读音但不实际渲染，导致无障碍支持缺失
每个读音必须独立绑定到对应汉字
一个ruby容器只应承载一个基字+一个rt，即使该字在句中重复出现且读音不同。例如“好”在“爱好”中读hào，在“好人”中读hǎo，就得分别写：
<ruby><rb>好</rb><rt>hào</rt></ruby><ruby><rb>爱</rb><rt>ài</rt></ruby><ruby><rb>好</rb><rt>hǎo</rt></ruby><ruby><rb>人</rb><rt>rén</rt></ruby>
不能合并为好好——这会破坏字音一一映射，换行时拼音还会整体悬停在第一个“好”上方。
关键约束：
-
rb不可省略，否则 Safari 和旧版 Edge 中ruby-align失效，拼音偏左或飘移 -
rt必须是ruby的直接子节点，中间不能插或 Fragment - 动态生成时（如 React/Vue），需确保每对
rb/rt严格按字符顺序生成，避免因空格、emoji 或组合字符导致错位
CSS 必须显式声明 ruby-align 和字体缩放
仅靠字结构无法保证正常显示。Safari 16 及更早版本默认ruby-align: start，Chrome 在 RTL 环境下也可能覆盖默认值。不设font-size则拼音和汉字一样大，完全遮盖基字。
最小可用样式集：
ruby {
ruby-align: center;
-webkit-ruby-align: center;
line-height: 1.2;
}
rt {
font-size: 0.6em;
line-height: 1;
}
注意：ruby-position: under虽可将拼音移到下方，但仅 Chrome 122+、Safari 17.4+ 支持，老环境会回退到上方；别用position: absolute或transform微调rt位置——这会切断语义流，导致换行错位、朗读跳过。
旧浏览器兼容要靠 rp 标签配对括号
IE 9、Android 4.4 WebView 等不识别ruby语义，会把rt当普通文本渲染。此时rp的作用就凸显了：它让老浏览器只显示括号包裹的拼音，视觉上接近“重(chóng)”，而现代浏览器则隐藏rp、只显示上方拼音。
正确写法必须成对出现：
<ruby><rb>重</rb><rp>(</rp><rt>chóng</rt><rp>)</rp></ruby>
常见错误：
- 只写一个
，漏掉闭合的<rp>)</rp>
- 把括号写进
rt里，如——这会让所有浏览器都显示括号，失去降级意义 - 认为现代项目可完全省略
rp——若目标用户含政务、教育等保守场景，仍建议保留
真正难的不是写对标签，而是每次遇到多音字时，得停下来查《现代汉语词典》或《普通话异读词审音表》，确认当前语境下的规范读音。这个环节没法自动化，也最容易被跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
