ruby标签是严格语义化的注音容器，必须配rt才生效，推荐写法为字拼音，多字需逐字拆分，rp仅作fallback且须在rt内，样式宜用固定像素控制。
零基础学 ruby 标签，别被“多功能”误导——它根本不是万能拼音生成器，而是严格语义化的注音容器。不按规范写，Chrome 和 Safari 渲染结果可能完全不同，甚至整段注音消失。
ruby 必须配 rt 才生效，否则等于没写
rt 是唯一触发注音渲染的子元素，ruby 本身只是语义容器。漏掉 rt，或把它放在 ruby 外面，浏览器直接忽略注音逻辑。
-
<ruby>汉</ruby>→ 完全无效，无拼音 -
<ruby>汉<rt>hàn</rt></ruby>→ 表面可行，但缺rb在 Safari 16.4+ 和部分安卓 WebView 中会错位 -
<ruby><rb>汉</rb><rt>hàn</rt></ruby>→ ✅ 推荐写法，结构完整、兼容性强 - 禁止
<ruby><rt>hàn</rt></ruby>→rt缺少对应基字，多数浏览器不渲染
多字必须逐字拆开，rb 和 rt 要一一紧邻
中文注音是字级行为，不是词级。浏览器不会自动切分“北京”为“北”“京”，也不会根据上下文选多音字读音。所有对齐、语义、无障碍支持，都依赖 DOM 层级的严格配对。
- ✅ 正确：
<ruby><rb>北</rb><rt>běi</rt></ruby><ruby><rb>京</rb><rt>jīng</rt></ruby> - ❌ 错误：
<ruby><rb>北京</rb><rt>běi jīng</rt></ruby>→ 拼音可能压扁、屏幕阅读器无法分字播报 - ❌ 错误：
<ruby><rb>重</rb><rb>庆</rb><rt>chóng</rt><rt>qìng</rt></ruby>→ 数量不等 + 顺序混乱，结果不可预测 - 多音字如“长”，必须人工判断上下文后分别包裹：
<ruby><rb>长</rb><rt>cháng</rt></ruby>度vs生<ruby><rb>长</rb><rt>zhǎng</rt></ruby>
rp 不是可有可无的括号，位置和内容都有硬约束
rp 的唯一作用是在不支持 ruby 的环境（如 IE11、旧版 Outlook、某些邮件客户端）中提供括号 fallback，比如显示“汉(hàn)”。但它在现代浏览器中必须被隐藏，而 Chrome 和 Safari 对它的处理完全相反。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确位置：
<rt><rp>(</rp>hàn<rp>)</rp></rt>——rp必须在rt内部，且内容只能是纯括号 - ❌ 错误：
<rp>(</rp><rt>hàn</rt><rp>)</rp>→rp在rt外，被忽略 - ❌ 错误：
<rt><rp>( </rp>hàn</rt>→rp含空格，部分浏览器不触发 fallback - ⚠️ 实测风险：Chrome v120+ 默认渲染
rp，导致显示“汉(hàn)”；Safari 隐藏rp，只显示上方小字 “hàn”。上线前必须双端实测 - 最稳方案：服务端或构建时根据 UA 判断是否为 Blink/WebKit 内核，直接移除
rp；次选用 CSS 强制隐藏：ruby rt rp { display: none !important; }
CSS 控制 rt 样式时，别碰 vertical-align 和百分比字号
rt 的默认样式（小号、上标、灰色）在各浏览器中差异极大。靠 vertical-align: super 或 font-size: 70% 微调，极易因字体、行高、缩放比例不同而偏移失准。
- ✅ 推荐写法：
ruby rt { font-size: 12px; line-height: 1; }—— 固定像素 + 紧凑行高，可控性最强 - ❌ 避免
font-size: 0.7em→ 基准不确定（有的按ruby，有的按根字体），Safari 可能缩得过小 - ❌ 避免
vertical-align: super→ 它相对于行高偏移，不是相对于基字，容易在不同字号下错位 - ✅ 如需统一垂直居中：
ruby { ruby-position: over; ruby-align: center; }（Chrome 122+、Safari 17.4+ 已支持） - ⚠️ 连续多个
ruby在 iOS Safari 上可能出现微小间距异常，可用父容器设font-size: 0，再给每个ruby单独设字号缓解
真正难的不是写对标签，而是接受 ruby 不做任何智能判断：它不解析拼音、不识别声调、不响应上下文、不支持动态变调。所有“多功能”效果，都建立在你手动拆字、人工校对、逐个配对的基础上。一旦结构断裂，渲染就不可逆地失效。
