ruby 是 html5 中用于标注文字读音的语义化标签，非 ruby 语言或小语种专属；需严格使用 rb/rt/rp 结构，rp 提供兼容降级，safari 等浏览器支持有限，应避免嵌套、全局 font-size 及整段包裹，关键处手写最稳妥。
ruby 标签不是 Ruby 编程语言的标签，也不是“小语种”专属功能——它只是 HTML5 中用于标注文字读音或注释的语义化容器，中文古籍、日文假名、韩文训读、甚至拉丁文转写都用得上。用错场景或忽略浏览器兼容性，反而会让学习者看不到注音。
为什么 ruby 在小语种网站里容易失效
常见现象是：在 Chrome 或 Edge 里正常显示假名注音，但在 Safari（尤其 iOS 16 之前）或旧版 Firefox 中完全不渲染，或者 rt 内容堆在行尾变成普通文字。
- 根本原因在于
ruby的 CSS 渲染依赖浏览器对display: ruby系列值的支持，而 Safari 长期只支持基础结构（ruby/rt），不支持rp的隐藏逻辑和弹性布局 - 移动端 WebView（如微信内置浏览器）多数沿用系统 Safari 引擎，表现更不可靠
- 如果父容器用了
font-feature-settings或自定义字体，可能覆盖默认的 ruby 排版行为
ruby 的最小可用写法与兼容兜底方案
不要嵌套 div 或滥用 span 模拟；标准写法必须严格包含 rb（被注字）和 rt（注音），rp 是可选但推荐的括号兜底：
<ruby><rb>漢</rb><rp>(</rp><rt>かん</rt><rp>)</rp><rb>字</rb><rp>(</rp><rt>じ</rt><rp>)</rp></ruby>
-
rp标签内容（通常是括号）会在支持ruby的浏览器中自动隐藏，不支持时才显示，这是唯一被广泛兼容的降级方式 - 避免给
ruby直接设font-size，应通过rt单独控制注音字号，例如rt { font-size: 0.6em; } - 若需多音节横向排列（如韩文初声/中声/终声分注），
ruby不适用——此时应改用table或 Flex 布局手动对齐
小语种网站中真正该警惕的陷阱
很多学习站把 ruby 当成“自动注音工具”，结果批量生成错误结构：
- 把整段日文（含助词、动词变形）全包进一个
ruby，导致注音错位——ruby必须按词粒度拆分，每个rb对应一个可独立注音的语素 - 用 JavaScript 动态插入
ruby但未触发浏览器重排，Safari 下首次加载不渲染，需强制getComputedStyle触发 - 在 SSR 渲染的页面中，服务端吐出的
ruby被某些 CDN 或代理压缩器误删了rp标签，造成降级失效
真正稳定的方案，往往是在关键例句中手写 ruby，其余大量文本用纯文本 + 鼠标悬停 title 或弹层展示读音——简单，且 100% 可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
