ruby标签必须配rb和rt，正确结构为<ruby><rb>汉</rb><rt>hàn</rt></ruby>；多字需分拆；Safari需重置rt样式并声明display: ruby；rp标签不可省略以保障降级显示。
ruby标签必须配rb和rt，不能只用ruby套文字加rt
浏览器不认<ruby>汉<rt>hàn</rt></ruby>这种写法——缺少rb，多数现代浏览器会忽略rt或降级为平铺文本。语义上，rb才是被注音的基字，rt只是它的“注解”，二者必须一一绑定。
正确结构只有两种等效形式：
<ruby><rb>汉</rb><rt>hàn</rt></ruby>-
<ruby>汉<rt>hàn</rt></ruby>（部分浏览器兼容，但非规范，不推荐）
多字必须拆开：<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>。合在一个ruby里写<rb>重庆</rb><rt>chóng qìng</rt>会导致排版挤压、CSS无法单独控制单字拼音、TTS朗读错音节边界。
rt默认样式在Safari里最不可靠，必须重置font-size和line-height
Safari 对 rt 的默认渲染逻辑和其他浏览器差异最大：可能不缩放、垂直偏移异常、甚至字体大小不受父元素影响。这不是 bug，是规范允许的实现自由度。指望em或百分比值（如font-size: 70%）统一效果，基本会翻车。
立即学习“前端免费学习笔记（深入）”；
实操建议直接用固定像素值 + 强制行高：
-
rt { font-size: 12px; }（比基字小约 1/3，适配常见 16px 基准） -
rt { line-height: 1; }（避免上下留白撑开行距） -
ruby { display: ruby; }（Safari 需要显式声明才能正确识别容器） - 别用
vertical-align: super—— 它让rt相对整行偏移，不是相对基字
rp标签不是可选项，老环境降级显示全靠它
不加rp，旧版 Safari 或某些邮件客户端（如 Outlook Desktop）会把拼音直接平铺在汉字后面，变成“汉hàn”这种可读性极差的形式。而加上rp后，不支持ruby的环境会回退为“汉(hàn)”，至少保留括号语义。
正确写法是把rp严格嵌套在rt内，且只含纯括号字符：
<ruby><rb>汉</rb><rt><rp>(</rp>hàn<rp>)</rp></rt></ruby>
注意：rp不能放在rt外面，也不能包含空格或换行；否则部分读屏软件可能跳过或误读。
别用ruby做整句拼音、动态变调或无障碍优先场景
ruby不解析拼音语义，也不响应上下文规则（比如“一”“不”的变调、“了”的轻声）。你写什么，就显示什么。如果需求是自动标注古诗拼音、支持TTS朗读、或要通过屏幕阅读器准确传达发音，ruby天生不适合。
更现实的边界是：
- 适合：教材生字表、辞典词条、静态人工校对过的少量注音
- 不适合：服务端动态注入拼音、需 aria-live 更新、整段古文一键标音
- 替代方案：用
span+aria-label保无障碍；或先用pinyin-pro等 JS 库生成拼音，再手动套ruby结构
真正容易被忽略的是：连续多个ruby在 Safari 中可能出现字间距异常，临时解法是给父容器设font-size: 0，再给每个ruby单独设字号——这不是优雅，但能跑通。
