ruby标签必须配rb和rt才能生效，仅写汉或汉hàn均无效；正确结构为汉hàn，rb声明基字、rt提供锚点，多字须逐字拆分并分别包裹rb与rt。
ruby 是拼音标注的首选，不是因为它“看起来像加拼音”，而是浏览器原生支持语义绑定、屏幕阅读器可识别、缩放/打印/竖排时行为可预期——其他方案（如 sup + CSS 定位）在这些环节全会掉链子。
ruby 标签必须配 rb 和 rt 才能生效
只写 <ruby>汉</ruby> 或 <ruby>汉<rt>hàn</rt></ruby> 都不行。浏览器只认 <ruby><rb>汉</rb><rt>hàn</rt></ruby> 这个完整结构：rb 明确声明“这是被注音的基字”，rt 才有锚点可对齐。省略 rb 会导致 Chrome 勉强渲染但 Firefox/Safari 直接忽略 rt，拼音平铺在汉字右侧甚至消失。
多字标注必须逐字拆开，不能偷懒套一层
把“重庆”写成 <ruby><rb>重庆</rb><rt>chóng qìng</rt></ruby> 看似省事，实际埋了三个坑：
- 拼音两个音节挤在一块，无法单独控制“重”的声调位置，“庆”的韵母可能被截断
- “重”在“重庆”中读 chóng，但若上下文是“重要”，就得标 zhòng——
ruby不自动分词，人工必须按字粒度控制 - 部分旧版 Safari 对连续
rb的 baseline 计算异常，导致拼音纵向错位
正确做法是：<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>
样式可控但不能乱动默认排版逻辑
ruby 的排版引擎和普通 inline 元素不同，强行用 position: absolute 或 margin-top 模拟上移，会在字体切换、缩放、响应式断行时彻底失准。真正该调的是：
-
ruby rt { font-size: 0.6em; line-height: 1; }—— 防止 Firefox 把拼音拉高、Chrome 贴底重叠 -
ruby { line-height: 1.8; }—— 给拼音留出垂直空间，避免和下一行文字打架 -
rt { ruby-position: over; }—— 触发浏览器内置 ruby 引擎，比 margin 可靠得多
别给 ruby 设 width、display: block 或 visibility: hidden，这些会直接破坏语义流和可访问性。
rp 标签不是装饰，是降级兜底的关键
在 IE 或老旧 Android WebView 中，ruby 完全不解析，rt 内容会平铺在汉字后面变成“汉hàn”。这时 rp 就起作用了：<ruby><rb>汉</rb><rt><rp>(</rp>hàn<rp>)</rp></rt></ruby>。现代浏览器隐藏 rp，只显示“hàn”；老浏览器则显示“汉(hàn)”。漏掉 rp，降级后就是裸拼音，阅读体验直接崩坏。
最易被忽略的点：拼音里的空格、声调、轻声写法必须严格按口语习惯来，比如“我们”是 wǒ men 不是 wǒ mén，“花儿”是 huā ér 不是 huār——ruby 不做语音判断，只忠实呈现你写的文本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
