ruby标签专为东亚文字设计，仅支持基字与注音一一映射；必须每个字单独包裹在ruby中并显式使用rb和rt，禁用整句共用rt，否则导致渲染错位、无障碍失效及样式失控。
ruby 标签不是“加拼音的快捷按钮”，而是专为东亚文字设计的语义化注音容器；它在国际化排版中定位明确：仅用于基字与注音的一一映射，不处理分词、变调、TTS朗读逻辑，也不适配英文缩写或数学上标。
为什么 ruby 不能直接套整句汉字 + 一个 rt
浏览器按 DOM 顺序将 rb（或隐式基字）与 rt 逐个配对。把多个汉字塞进一个 ruby 里，例如 <ruby>重庆<rt>chóng qìng</rt></ruby>，会导致：
- 多数现代浏览器只给最后一个字（“庆”）渲染拼音，前面的“重”被跳过
- 屏幕阅读器无法分别播报两个音节，可能读成单个连缀音“chóngqìng”
- CSS 无法单独选中“重”的拼音做高亮或样式切换
- 在 Safari 16.4+ 和部分安卓 WebView 中，注音位置偏移或合并显示
rb 必须显式写出，哪怕只是包裹单个汉字
虽然 HTML5 允许省略 rb、用纯文本作基字，但实际项目中会出兼容问题：
- Safari 16.4+ 对隐式基字识别不稳定，常把拼音错位到前一个
ruby块 - Android WebView（尤其 4.4–6.x）会忽略无
rb的结构，降级后只剩“汉hàn”平铺 - 无障碍工具依赖
rb明确标识可读基字，缺失时可能跳过整段
正确写法是：<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>
rp 不是装饰，是降级 fallback 的关键开关
rp 的作用不是美化括号，而是在 IE11、Outlook Desktop、旧版邮件客户端等不支持 ruby 的环境里，让拼音至少以“（chóng）”形式可读：
- 必须成对出现：
<rp>( </rp><rt>chóng</rt><rp>)</rp>，否则老浏览器可能只显示“重chóng)”或漏括号 - 内容只能是纯括号字符（
(、)、[、]），混入空格或中文标点会被忽略 - 现代浏览器默认隐藏
rp，无需 CSS 干预；但若项目明确不支持 IE 或邮件场景，可省略
CSS 微调必须绕开破坏性属性
想统一拼音字号或居中，优先用标准属性而非 hack 手段：
- 用
ruby rt { ruby-position: over; }替代margin-top: -0.5em——后者在缩放、换行、不同字体下极易失准 - 设固定像素字号（如
font-size: 12px）比百分比（0.7em）更稳，因各浏览器对rt默认字号计算不一致 - 禁用
position: absolute、display: inline-block或vertical-align: super——这些会切断浏览器内置的 ruby 对齐引擎 - 连续多个
ruby在 iOS Safari 上偶有微小间距异常，可用父容器font-size: 0+ 子元素重设字号缓解
最易被忽略的是：ruby 不解析拼音语义，也不响应上下文变调；所有多音字、轻声、儿化音都得人工判断并硬编码，没捷径可走。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
