ruby标签必须配合rb和rt使用才能语义化标注发音，多字须逐字拆分并显式用rb包裹基字、rt对应拼音，否则排版错乱或降级不可读。
ruby 标签不是“加拼音的快捷按钮”，它只在明确需要语义化标注发音的静态场景中可靠有效。用错地方，轻则排版错乱，重则降级后信息不可读。
多字词必须拆成单字 ruby 块，不能整词包裹
浏览器不会自动把 rt 内容按字切分对齐。写成 <ruby>重庆<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><rb>京</rb><rt>きょう</rt></ruby>，避免“東京”共用“とうきょう”导致促音、长音位置失准 - 若强行整词包裹，Safari 和部分安卓 WebView 会把拼音压成一行小字，视觉上无法判断哪个音属哪个字
必须显式使用 rb，不能省略或用纯文本替代
很多教程示例写成 <ruby>汉<rt>hàn</rt></ruby>，这在 Chrome/Firefox 中看似能显示，但属于非标准用法——rb 是语义必需的基字容器，省略后 Safari 可能忽略 rt，IE 和旧 WebView 直接不渲染注音。
- 正确结构必须含
rb：<ruby><rb>汉</rb><rt>hàn</rt></ruby> -
rb必须紧邻对应rt，中间不能插入空格、换行或其它标签，否则部分浏览器（尤其是 iOS Safari）会断开关联 - 不要试图用 CSS 把普通文本“伪装”成
rb，语义缺失会导致屏幕阅读器跳过注音，无障碍支持失效
样式重置必须覆盖 font-size、line-height 和 ruby-position
不同浏览器对 rt 的默认渲染逻辑差异极大：Chrome 默认缩放为 50%，Firefox 约 60%，Safari 则可能完全不缩放，仅靠 vertical-align: super 无法统一。
- 强制设置
rt { font-size: 0.7em; line-height: 1; }，避免因行高撑开导致上下留白 - 用
ruby { ruby-position: over; }替代margin-top或transform模拟上标，后者在字体缩放或 DPI 变化时极易偏移 - 加
ruby { display: ruby; }可修复 Safari 对连续多个ruby元素的 display 计算偏差 - 别设
rt { vertical-align: text-top; }——它基于行框对齐，而非基字，iOS 上常导致整体上浮半像素
禁用场景比可用场景更需警惕
不是所有“上面小字+下面大字”的需求都适合 ruby。它不解析语义、不支持动态逻辑、不兼容 TTS 朗读，强行套用只会埋坑。
- 英文缩写解释（如
NASA）请用<abbr title="National Aeronautics...">NASA</abbr>，语义正确且无障碍友好 - 自动生成拼音？
ruby不提供音调推导、轻声变调能力，得靠 JS 库（如pinyin-pro）先生成再注入结构 - 服务端渲染时若拼音字段为空，务必过滤掉整个
<rt></rt>，否则屏幕阅读器会读出“空白注音”，干扰用户 - 邮件模板、PDF 导出等环境几乎不支持
ruby，降级后变成“汉字拼音”平铺，阅读体验极差
真正容易被忽略的是：每个 ruby 块都是独立语义单元，无法跨块对齐、不能响应式缩放基字与注音的比例关系。一旦内容量变大或交互增强，就得切换技术方案——比如用 span + aria-label 保语义，或用 Canvas 渲染保精度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
