ruby标签本质是语义化标注发音或简短含义的容器，必须用rb包裹基字、rt提供注音，一一对应；多字须分层包裹，禁用于长释义、工具提示或装饰性场景。
ruby 标签在现代排版中已从“仅限日文注音”扩展为通用的**短文本旁注容器**，但它的实际使用仍高度受限于浏览器渲染一致性与语义边界——它不是用来做任意浮动说明或工具提示的。
ruby 标签的语义本质没变，只是适用场景被重新确认
HTML5 规范里 ruby 依然定义为“标注文字的发音或含义”，核心结构是 ruby 包裹 rb（基文）和 rt（注音），可选加 rp（括号降级 fallback）。它不表示“上标”“角标”或“悬浮提示”，也不该被 CSS 强行拉伸成多行说明框。
常见错误现象：
- 用
ruby+rt实现按钮右上角红点 —— 这属于视觉装饰，应改用span+ aria-label - 把整段英文释义塞进
rt——rt内容应简短（通常 ≤ 2 个词），否则屏幕阅读器会卡顿或跳过 - 嵌套
div或p进ruby——ruby只接受rb、rt、rp和纯文本节点
Chrome/Firefox/Safari 对 ruby 的支持差异仍在影响布局稳定性
虽然主流浏览器都支持基本 ruby 渲染，但以下细节表现不一：
立即学习“前端免费学习笔记（深入）”；
-
rt的默认垂直对齐位置：Chrome 倾向顶部对齐，Safari 在某些字号下会轻微偏移 - 当
rb换行时，rt是否自动分段跟随 —— Firefox 支持较好，Chrome 115+ 才开始稳定支持 -
ruby-align: center在 Safari 中可能被忽略，需配合text-align: center双重声明 - 用
display: ruby手动模拟 ruby 结构时，IE 和旧 Edge 完全不识别
若项目需兼容 iOS 15 以下或 Android WebView，建议优先用 CSS Grid 模拟简单旁注，而非强依赖 ruby 布局逻辑。
真正适合用 ruby 的现代场景其实很窄
它只在满足三个条件时才值得启用：
- 目标用户明确需要发音/简短语义辅助（如中文古籍、日文学习站、多语言术语表）
- 注音内容长度可控（
rt文本 ≤ 8 个字符，且不含换行或复杂标点） - 页面不依赖 ruby 元素参与响应式断点计算（因为
ruby的盒模型在 flex/grid 中行为不稳定）
示例（合规用法）：
<ruby> <rb>汉</rb><rt>hàn</rt> <rb>字</rb><rt>zì</rt> </ruby>
这个结构在所有现代浏览器中能正确读出“hàn zì”，且缩放时注音不会脱离基文。一旦换成“汉字（Chinese character）”，就该换用 abbr 或带 aria-describedby 的普通元素。
最容易被忽略的一点：ruby 不是“轻量 tooltip”，它的语义权重很高——屏幕阅读器遇到 ruby 会强制停顿并朗读 rt，如果滥用，反而破坏阅读流。真正需要旁注的地方，先问自己：这是用户必须同步理解的信息，还是可选补充？答案决定该用 ruby，还是别的更轻、更可控的方案。
