Ruby注音必须显式包含rb和rt标签，缺一不可；多字需拆分为多个ruby块，rp为降级兜底必需，CSS须显式设置line-height和font-size以确保正确排版。
ruby必须显式包含rb和rt，缺一不可
很多人在写ruby时习惯省略rb，比如<ruby>汉<rt>hàn</rt></ruby>，结果拼音在Chrome 115+或Safari 17.4+里错位、贴底甚至不渲染。这是因为浏览器只把rb+rt成对结构识别为有效注音锚点，没rb，rt就失去定位依据。
正确结构必须是：
<ruby> <rb>汉</rb> <rt>hàn</rt> </ruby>
-
rb不能用普通文本替代，也不能嵌套span等标签 -
rt必须紧跟对应rb，中间不能有空格、换行或块级元素 - 多个字必须拆成多个
ruby块，不能共用一个rt
多音字和专有名词必须逐字独立标注
“重”在“重庆”中读chóng，在“重要”中读zhòng；“长”在“长度”中读cháng，在“长大”中读zhǎng——ruby不会自动判断上下文，全靠人工控制。试图用一个ruby包两个字再配一个rt（如<ruby><rb>重庆</rb><rt>chóng qìng</rt></ruby>）会导致排版挤压、语音合成工具无法切分音节。
可靠做法是每个字单独一层：
立即学习“前端免费学习笔记（深入）”；
<ruby><rb>重</rb><rt>chóng</rt></ruby> <ruby><rb>庆</rb><rt>qìng</rt></ruby>
- 繁体字同样适用，如
<ruby><rb>臺</rb><rt>ㄊㄞ</rt></ruby> - 专有名词如“乌鲁木齐”，即使口语连读，也必须拆为六个
ruby块，确保TTS能逐字合成 - 轻声、变调（如“一”读yí、“不”读bú）必须按实际发音手写，不能照字典原调填
rp不是可有可无的装饰，而是降级兜底的关键开关
没有rp时，旧版Android WebView（如4.3）、部分邮件客户端或定制内核会直接丢弃rt，只剩裸汉字；或者把拼音堆在文字后面变成“汉字hàn zì”，完全不可读。加rp后，这些环境会渲染为“汉(hàn)”，至少保留语义可读性。
标准写法必须成对且紧邻rt：
<ruby> <rb>汉</rb> <rp>( </rp> <rt>hàn</rt> <rp> )</rp> </ruby>
-
rp内容不限于( )，可用【】或〔〕，但前后必须一致 - 现代浏览器默认隐藏
rp，只显示拼音；老浏览器则显示括号包裹形式 - 如果项目明确不支持Android 4.x或IE，可省略
rp，但别误以为它是“样式辅助”
CSS必须显式设置字号与行高，否则排版大概率出问题
不加CSS时，rt默认字号与基字相同，且baseline对齐混乱：Firefox可能把拼音压进汉字里，Safari留白过大，Chrome在缩放时容易换行脱节。这不是bug，是浏览器未触发内置注音排版逻辑的表现。
最小可行CSS组合：
ruby { line-height: 1.8; }
rt { font-size: 0.6em; line-height: 1; }
ruby { white-space: nowrap; }
-
line-height设在ruby容器上，防止多字连续时行高挤压拼音 -
rt的font-size必须显式声明，不能依赖继承；line-height: 1防Firefox拉高 - 禁用
position: absolute、visibility: hidden等破坏流式布局的样式 - 避免在
rt里混入HTML实体、全角空格或中文标点，否则拼音可能被截断或错位
真正难的不是写对标签，而是每个rb都要人工确认读音、每个rt都要按口语习惯调整轻声变调、每处rp都要考虑降级是否可读——机器不帮你做语义判断，它只忠实地渲染你写的每一个字符。
