ruby是严格语义的注音系统，需rb/rt成对、rb包裹单字、rp嵌rt内作降级括号，且须用ruby-position: over等原生排版逻辑，禁用字符串拼接。
ruby 标签不是“加拼音的快捷按钮”，它是一套有严格语义和结构要求的注音系统。不按规范写，Chrome 可能显示错位，Safari 可能直接不渲染，屏幕阅读器可能跳过拼音——新手最容易栽在结构缺失上。
rb 和 rt 必须成对出现，不能省略 rb
很多新手照着“ruby里放汉字再套rt”的简化写法：<ruby>汉<rt>hàn</rt></ruby>，结果在 Safari 17+ 或 Chrome 115+ 中拼音贴在字右侧、甚至消失。原因：现代浏览器已要求显式rb作为基字锚点，否则rt失去绑定目标。
-
rb必须包裹被注音的单个汉字（不能是空格、标点或多个字） -
rt必须紧跟对应rb，中间不能有换行、空格或其它标签 - 多字必须拆开：
<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></ruby>
rp 不是可选装饰，而是降级保命开关
不加rp，老环境（如 Outlook 桌面版、IE11、部分邮件客户端）会把“汉hàn”连在一起显示，完全不可读。它不是为了“好看”，是让降级后仍可理解的关键 fallback。
-
rp必须成对，且只含括号字符：<rp>( </rp>和<rp>)</rp> -
rp要嵌在rt内部，不是ruby的平级子元素 - 正确结构：
<ruby><rb>你</rb><rt><rp>( </rp>nǐ<rp>)</rp></rt></ruby> - 别写成
<ruby><rb>你</rb><rp>( </rp><rt>nǐ</rt><rp>)</rp></ruby>——多数浏览器会忽略这种错位
CSS 不能靠猜，得用浏览器内置排版逻辑
直接给rt设margin-top: -0.3em看似能拉上去，但换字体、缩放、换设备就偏移；用font-size: 70%在 Firefox 和 Safari 下计算方式不同，常导致截断或压字。
立即学习“前端免费学习笔记（深入）”；
- 必须设
ruby { ruby-position: over; }，触发浏览器原生上标定位引擎 -
rt字号建议用固定像素值（如12px）或0.6em，避免百分比浮动 - 父容器加
line-height: 1.8，防止拼音被相邻行高挤压 - 禁用
position: absolute、visibility: hidden——降级后拼音直接消失，且破坏无障碍
别用字符串拼接生成 ruby 结构
新手常在 JS 里用模板字符串拼：`<ruby><rb>${char}</rb><rt>${pinyin}</rt></ruby>`。一旦char含&、或引号，DOM 就断裂；更严重的是，若<code>pinyin为空，<rt></rt>会被屏幕阅读器读作“空白注音”，干扰用户。
- 用现成库如
pinyin-pro的html()方法，它输出结构合法、自动转义的字符串 - 在 Vue/React 中封装为组件，模板内固化
rb/rt结构，props 只传字符和拼音 - 服务端渲染时，务必校验拼音字段非空，空值应跳过整个
ruby块，而非留空rt
真正难的不是写对一行ruby，而是在整段古诗、词典条目或响应式卡片里保持每个字的rb-rt不松动、不越界、不被截断——结构一旦出错，视觉和语义就全垮了。
