必须为ruby标签显式设置css重置：rt的font-size用固定em值（0.65em～0.7em）、line-height设为1或略小、ruby-position强制设为over；多字注音须拆分为独立ruby单元；rp必须嵌套在rt内且仅含括号；lang和bdi需协同使用以保障多语言混排与无障碍支持。
ruby标签不写CSS就别指望能用
浏览器对ruby的默认渲染差异极大：Chrome把rt缩到0.6em、上标、灰色；Safari可能不缩放、垂直偏移、甚至字体变粗；iOS旧版WebView干脆不渲染rt。不加CSS重置，等于没写注音。
必须强制覆盖以下三项：
-
rt的font-size设为固定比例（推荐0.65em～0.7em），禁用百分比值（如70%）——不同内核计算基准不同，会导致 Safari 偏高、Chrome 偏低 -
rt的line-height设为1或略小于1（如0.85），否则行距撑开，拼音被“顶”得离基字太远 - 显式声明
ruby-position: over（而非依赖默认值），避免部分安卓 WebView 误用under
多字注音必须拆成多个ruby，不能靠CSS强行对齐
写成 <ruby>汉字<rt>hàn zì</rt></ruby> 看似省事，实则埋雷：屏幕阅读器无法分别播报“汉”和“字”，TTS会连读成一个音节；CSS无法单独控制“汉”的拼音字号或颜色；换行时两个字可能被拆到不同行，而拼音仍挤在第一行末尾。
正确做法是每个字独立包裹：
<ruby><rb>汉</rb><rt>hàn</rt></ruby><ruby><rb>字</rb><rt>zì</rt></ruby>
这样带来的实际好处：
- 语义完整：每个
rb与对应rt构成独立发音单元，无障碍工具可逐字朗读 - 样式可控：可对特定字加类名，比如多音字
<ruby class="polyphone"><rb>长</rb><rt>zhǎng</rt></ruby>
- 响应式安全：配合父容器
font-size: 0 + 子元素重设字号，能缓解 iOS Safari 连续<code>ruby间的异常字间距
rp不是可选项，而是降级兼容的硬性开关
不加rp，老环境（IE11、Outlook Desktop、部分邮件客户端）会直接显示“汉hàn”，拼音紧贴汉字后面，完全不可读。这不是美观问题，是信息丢失。
rp必须严格满足三点：
- 必须嵌套在
rt内部，不能并列或外挂：<rt><rp>(</rp>hàn<rp>)</rp></rt>✅；<rp>(</rp><rt>hàn</rt>❌ -
rp内容只能是纯括号字符（(、)、[、]），不能有空格、字母、全角符号，否则多数浏览器忽略整个rp块 - 现代项目若明确不支持 IE/旧 WebView，可用 CSS 强制隐藏：
ruby rt rp { display: none !important; }，但服务端 UA 检测后直接移除更干净
lang和bdi缺失会导致多语言混排错乱
当拼音与阿拉伯文、希伯来文或日文混排时，仅靠ruby结构不够。例如：<p lang="ar">مرحبا <ruby>李<rt>lǐ</rt></ruby></p> —— 拼音lǐ可能被 RTL 上下文拉到左边，或被语音引擎按阿拉伯语规则朗读。
必须协同使用：
-
lang属性指定拼音语言：<ruby lang="zh-Hans">李<rt>lǐ</rt></ruby>，确保 TTS 用中文引擎读 -
bdi隔离文本方向：<bdi><ruby lang="zh-Hans">李<rt>lǐ</rt></ruby></bdi>，防止 RTL 环境拖拽拼音位置 - 禁止给
bdi加dir属性——bdi默认就是dir="auto"且带unicode-bidi: isolate，手动加反而破坏行为
最易被忽略的是：很多团队只关注 Chrome/Firefox 渲染效果，却忘了邮件模板、CMS 导出页、PWA 离线缓存页这些场景里，UA 更老旧、CSS 加载更不可靠、lang 缺失直接导致语音播报失效。注音不是装饰，是语义必需项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
