多音字必须人工判读，不能依赖自动拼音库硬套；因工具按字标音、无法理解上下文，“长”在“长度”读cháng、“长大”读zhǎng，误标将导致语义错误；屏幕阅读器照读，听者无法分辨。
多音字必须人工判读，不能靠自动拼音库硬套
所有自动拼音工具（如 pinyin-pro、pypinyin）都只能按字给音，无法理解上下文。“长”在“长度”里读 cháng，在“长大”里读 zhǎng，工具默认可能全标成 cháng 或 zhǎng，导致语义错误。屏幕阅读器会照读，听者无法分辨。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对含多音字的词，先人工确认读音，再生成
<ruby></ruby>结构 - 避免用
data-pinyin或title存备用音——这些不参与语义渲染，对无障碍无效 - 若需提供多音对照（如教学场景），用并列
<rb></rb>+<rt></rt>：<ruby><rb>长</rb><rt>cháng</rt><rb>长</rb><rt>zhǎng</rt></ruby>，而非在一个<rt></rt>里写cháng/zhǎng
结构必须严格：每个字一个 <rb></rb>，每个 <rb></rb> 后紧跟对应 <rt></rt>
写成 <ruby>否<rt>pǐ</rt></ruby> 看似省事，但 Safari 和旧版 Edge 会把 <rt></rt> 当作无锚点文本，导致拼音左贴、偏移甚至垂直错行。根本原因是缺少 <rb></rb> 提供基线定位依据。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 哪怕单字也必须包
<rb></rb>：<ruby><rb>否</rb><rt>pǐ</rt></ruby> - 多字词逐字拆开，不可整词包裹：
<ruby><rb>中</rb><rt>zhōng</rt><rb>华</rb><rt>huá</rt></ruby>，不是<ruby>中华<rt>zhōng huá</rt></ruby> - 动态生成时（如 Vue/React），确保
<rt></rt>是<ruby></ruby>的**直接子节点**，中间不能插Fragment或空格
样式不设就失效：ruby-align、font-size、line-height 缺一不可
只写 HTML 结构，不加 CSS，多数浏览器会显示拼音但位置错乱：或叠在字上，或被截断，或水平左对齐。这不是 bug，是规范要求显式声明排版行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全局重置：
ruby { ruby-align: center; -webkit-ruby-align: center; line-height: 1.2; } -
rt必须设font-size: 0.6em（不用百分比，因缩放逻辑不一致） - 禁用
position: absolute调位置——它会让屏幕阅读器跳过注音，且破坏响应式 - 轻声字可加
rt[data-tone="light"] { font-size: 0.55em; }，配合<rt data-tone="light">men</rt>
兼容性兜底：老浏览器靠 <rp></rp>，不是靠 JS 检测
IE9、旧安卓 WebView 不识别 <ruby></ruby>，会把 <rt></rt> 当普通文本渲染出来，变成“否pǐ”这种不可读形式。<rp></rp> 不是装饰，是 fallback 必选项。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 标准写法必须成对：
<ruby><rb>否</rb><rp>(</rp><rt>pǐ</rt><rp>)</rp></ruby> - 现代浏览器隐藏
<rp></rp>，老浏览器显示“否(pǐ)”，语义完整可读 - 别用 JS 判断 UA 后动态插入标签——加载延迟、SSR 不友好、首屏语义缺失
<rt></rt> 都会被语音合成器朗读、被搜索引擎索引、被视障用户依赖。结构松散、样式缺位、fallback 缺失，任一环节出错，都会让“注音”变成“干扰”。 
