ruby标签需严格嵌套：基文（纯文本或内联元素）必须直接与rt同级，禁用div/span等中断；多音字须人工标注；css推荐font-size和line-height控制显示；移动端及屏幕阅读器支持有限。
ruby 和 rt 标签的基本结构必须严格嵌套
HTML 的 ruby 不是独立注音工具，它只提供语义容器，真正起作用的是内部的 rt（ruby text）和可选的 rp（ruby parentheses）。浏览器默认会把 rt 内容以小号字体显示在基文上方（或右侧，取决于 writing-mode），但前提是结构合法：ruby 必须直接包裹基文（如汉字）和 rt，不能中间插 div、span 或换行符。
常见错误是写成：
<ruby><span>汉</span><rt>hàn</rt></ruby>
这在多数浏览器中会失效——span 打断了基文与 rt 的关联。正确写法只能是：
<ruby>汉<rt>hàn</rt></ruby>
- 基文必须是纯文本节点，或仅含内联元素（如
em、strong），且不能有块级子元素 - 一个
ruby块里可以有多组“字+rt”，比如<ruby>北<rt>běi</rt>京<rt>jīng</rt></ruby> -
rp仅用于兼容不支持 ruby 的旧浏览器，内容通常是括号，如<rp>(</rp><rt>hàn</rt><rp>)</rp>，现代项目可省略
中日韩文字注音的实际差异要手动处理
ruby 标签本身不识别语言，也不自动转换拼音/平假名/汉字训读。你填什么，它就显示什么。这意味着：
- 中文需手动输入普通话拼音（注意声调：用
ā á ǎ à或数字标调如han4，后者更易输入但需 CSS 配合对齐） - 日文若标音读（音読み），填平假名（如
にほん）；若标训读（訓読み），填对应日语词（如ひのもと），ruby不做任何判断 - 韩文同理，需手动填谚文（如
한국），不能依赖浏览器生成 - 多音字、异读字（如日文「行」可读
こう或ぎょう）必须由人工根据上下文决定，标签不提供歧义消解
例如「长」字在「长江」中读 cháng，在「长辈」中读 zhǎng，必须分别写为：
<ruby>长<rt>cháng</rt>江</ruby><ruby>长<rt>zhǎng</rt>辈</ruby>
CSS 控制显示效果时优先用 font-size 和 line-height
默认情况下，rt 字体偏小、位置偏高，但不同浏览器渲染细节不一致（如 Chrome 垂直居中较准，Safari 可能略偏上）。靠 vertical-align 或 top 调整容易破坏可访问性，推荐用更稳定的组合：
- 统一设置
ruby { line-height: 1.6; }避免基文行距被压缩 - 用
rt { font-size: 0.6em; }替代固定像素值，确保缩放时比例不变 - 如需右对齐（如竖排中文或日文），加
ruby { ruby-position: over; writing-mode: vertical-rl; }，但注意 IE 完全不支持writing-mode在 ruby 上 - 避免给
rt设position: relative—— 会脱离 ruby 流式布局，导致换行错位
移动端和屏幕阅读器的支持仍有限
虽然主流桌面浏览器（Chrome/Firefox/Safari）对 ruby 渲染基本可用，但问题集中在两端：
- iOS Safari 对连续多个
ruby块的换行支持不稳定，常出现注音挤到下一行开头；临时方案是用white-space: nowrap包裹整组，但会牺牲断行灵活性 - 绝大多数屏幕阅读器（NVDA、VoiceOver）忽略
rt内容，不会朗读拼音或假名。如需无障碍支持，必须额外加aria-label或隐藏文本，例如：<ruby aria-label="hàn yǔ">汉语<rt>hàn yǔ</rt></ruby> - 微信内置浏览器（X5 内核）对
ruby支持极差，rt常被渲染成普通行内文本。生产环境建议用 CSS 伪元素 + data-* 属性降级模拟
最麻烦的其实是混合排版：当一行里既有带 ruby 的汉字，又有英文或数字时，基线对齐极易错乱，这时连 font-feature-settings: "ruby" 这种实验性属性也帮不上忙——它只影响字体特性，不解决布局逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
