ruby 标签是 html5 中专为注音、训读设计的语义化标签，与 ruby 语言无关；必须成对使用 rp 提供降级支持，多字注音需每个字独立包裹 rb 和 rt，并通过 css 微调样式以确保可访问性与正确渲染。
ruby 标签不是 Ruby 编程语言
很多人第一次看到 ruby 标签会误以为和 Ruby 语言有关，其实完全无关——它是 HTML5 中专为「注音、训读、发音辅助」设计的语义化标签，原生支持古汉语、日语、韩语等需要上标小字标注的场景。浏览器对它的支持已很稳定（Chrome 5+、Firefox 38+、Safari 5+、Edge 全支持），但默认样式极简，不加 CSS 几乎看不见效果。
基础结构：rt 和 rp 必须成对出现才可靠
常见错误是只写 <ruby><rb>漢</rb><rt>hàn</rt></ruby>，这在部分旧版 Safari 或屏幕阅读器中会丢失语义或渲染异常。正确写法必须包含 rp（fallback 括号）：
<ruby><rb>漢</rb><rp>(</rp><rt>hàn</rt><rp>)</rp></ruby>
原因：rp 是为不支持 ruby 的浏览器提供降级显示（如显示为「漢(hàn)」），同时现代浏览器也依赖它触发正确的排版引擎行为。漏掉 rp 可能导致：
-
rt内容被忽略或垂直偏移异常 - 某些 Android WebView 渲染为空白
- 无障碍工具无法识别注音关系
多字注音：rb 和 rt 要严格一一对应
古汉语常需逐字注音（如「風乎舞雩」），不能把整串字塞进一个 rb、再配一个 rt。否则拼音会堆叠在第一个字上方，或被截断：
❌ 错误写法（拼音全挤在「風」上）：
<ruby><rb>風乎舞雩</rb><rt>fēng hū wǔ yú</rt></ruby>
✅ 正确写法（每个字独立包裹）：
<ruby><rb>風</rb><rp>(</rp><rt>fēng</rt><rp>)</rp></ruby><ruby><rb>乎</rb><rp>(</rp><rt>hū</rt><rp>)</rp></ruby><ruby><rb>舞</rb><rp>(</rp><rt>wǔ</rt><rp>)</rp></ruby><ruby><rb>雩</rb><rp>(</rp><rt>yú</rt><rp>)</rp></ruby>
注意：rb 不是标准 HTML 标签，但它是 ruby 的隐式容器；现代写法更推荐显式使用 <rb></rb>（HTML5 正式支持），避免依赖浏览器自动解析。
样式微调：用 CSS 控制 rt 字体大小和间距
默认 rt 字体很小、紧贴文字顶部，古汉语注音常需更清晰可读。关键 CSS 属性：
-
ruby { ruby-align: center; }—— 让拼音居中对齐汉字（默认 left） -
rt { font-size: 0.6em; line-height: 1; }—— 防止拼音行高过大压到上一行 -
rb, rt { display: inline-block; }—— 确保多字时横向排列不换行 - 慎用
vertical-align：它可能破坏ruby的内置对齐逻辑
特别提醒：不要用 position: relative + top 手动上移 rt，这会导致打印、缩放、高对比度模式下错位，且破坏语义结构。
实际项目中，最易被忽略的是 rp 的存在必要性，以及多字场景下 rb/rt 的粒度控制——不是“能显示就行”，而是“每个字的读音都必须可被程序准确提取”。一旦涉及古籍数字化、无障碍访问或拼音导出，结构松散的写法会立刻暴露问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
