ruby-position 是唯一真正影响注音位置的标准 css 属性,用于控制 rt 在基字上方(over)、下方(under)或右侧(right);其他如 ruby-align、ruby-merge 等属废弃草案属性,未被实现;实际排版依赖通用 css 组合与语义结构约束。

HTML 中没有 ruby-position 以外的“高级排版控制属性”——所谓“高级”,其实是用标准 CSS 属性组合实现精细控制,而非存在一堆专有属性。
ruby-position 是唯一真正影响注音位置的标准 CSS 属性
它直接告诉浏览器把 rt 放在基字上方(over)、下方(under)或右侧(right,竖排时生效)。其他所谓“控制属性”都是误传或旧草案残留:
-
ruby-position: over是默认值,但显式声明更可靠,尤其在混合 writing-mode 场景下 -
ruby-position: under在 Chrome 122+、Safari 17.4+ 才稳定支持;Firefox 目前仍忽略该值 - 不要尝试
ruby-align或ruby-merge:它们曾出现在早期草案中,但从未被主流引擎实现,MDN 和 WHATWG 标准均无记录 - 任何带
rtc的写法(如rtc="bottom")纯属无效——浏览器根本不解析该属性,也不报错
真正起作用的是基础 CSS 组合,不是 ruby 专属属性
排版效果取决于对 ruby、rb、rt 分别设置的通用样式,关键点在于覆盖浏览器默认行为:
-
ruby { line-height: 1.8; }:防止rt被压缩进汉字行高里(Firefox 尤其敏感) -
rt { font-size: 0.6em; line-height: 1; }:避免依赖浏览器默认的 50% 缩放(各引擎实现不一致) -
ruby { white-space: nowrap; }:中文混排数字/英文时防断行脱节(如「第123 页」) -
rt { vertical-align: text-top; }:比默认top更稳,减少不同字体 baseline 偏移
动态生成时最容易忽略的结构约束
框架里拼字符串或用 v-html/dangerouslySetInnerHTML 注入 ruby,稍不注意就破坏语义锚点:
-
rt必须是ruby的**直接子元素**,套一层<span></span>或<div> 就失效(React/Vue 模板中常见) <li> <code>rb不能省略——即使浏览器渲染看似正常,Safari 17+ 和部分 Android WebView 会错位或合并注音 - 多字必须拆成多个独立
<ruby><rb>X</rb><rt>x</rt></ruby>,不能共用一个rt或用空格分隔 - 拼音含全角字符、中文标点、大写字母时,
rt内容可能被截断或排版溢出(必须用半角小写 Unicode 声调)
最常被绕过的复杂点:打印导出和邮件客户端。wkhtmltopdf、Outlook Desktop 等完全不解析 rt,也不会应用 ruby-position —— 这不是样式问题,是渲染引擎压根没实现该模块。需要 fallback 方案时,得靠 JS 检测 + 替换为括号文本,而不是寄希望于某个“隐藏高级属性”。











