CSS ruby-position 怎样控制注音显示在汉字上方还是旁边

在多语言文档组件里，ruby 注音最容易出问题的地方不是“能不能显示”，而是注音到底应该放在正文上方、下方，还是字符侧边。真正负责这个位置选择的 CSS 属性是 ruby-position：普通横排注音优先考虑 over 或 under，中文注音符号一类的侧排场景使用 inter-character，多层标注则要理解 alternate 的交替语义。

这篇文章把结构和位置拆开讲。HTML 负责表达“哪段是正文、哪段是注音”，CSS 再决定注音相对正文的排布；这样组件在扩展日文读音、中文注音和竖排版式时，不需要用绝对定位硬推文字。

大规模注音组件先把“位置”从结构里拆出来

一个可维护的 ruby 组件至少有三层职责：ruby 是注音容器，rb 放基础文本，rt 放注音文本，ruby-position 只负责控制注音相对基础文本的位置。不要把“上方”写进 HTML 类名，也不要让每个语言组件自己计算偏移量。

東京（とうきょう）

/* 位置由样式层决定，组件结构可以复用 */
.term--jp {
  ruby-position: over;
}

/* 让注音与正文保持清晰的字号层级 */
.term--jp rt {
  font-size: 0.5em;
  line-height: 1;
}

这层拆分的工程价值在于：同一份语义结构可以被不同书写模式复用，位置策略也可以集中收敛到主题或语言样式中。下面这张是静态结构说明图，不是浏览器截图，也不是运行结果。

over、under、inter-character如何选择

over 表示注音放在基础文本的外侧上方，under 表示放在下方；在横排文字里，它们最直观。对于需要把注音符号放到字符侧边的场景，使用 inter-character，它不是“把上方注音缩小一点”，而是另一种排布语义。

/* 普通横排读音：注音在正文上方 */
.ruby-reading {
  ruby-position: over;
}

/* 教材或标注稿需要把注音放在正文下方 */
.ruby-reading--under {
  ruby-position: under;
}

/* 注音符号适合字符侧边，不要用绝对定位模拟 */
.ruby-reading--bopomofo {
  ruby-position: inter-character;
}

需要特别注意书写方向：规范把 over 和 under 定义成相对于基础文本的逻辑位置，而不是永远等价于物理的顶部和底部。在竖排文字中，视觉位置会随书写模式变化，因此不能只凭横排截图推断最终位置。

选择时可以记住三个问题：读者是在读普通音标还是注音符号？正文是横排还是竖排？注音是装饰性提示还是必须与字符保持稳定的语义关联？答案明确后，属性值通常比额外的定位代码更短，也更容易维护。

alternate不是普通的“默认上方”开关

ruby-position 的初始值是 alternate。当只有一层注音时，它通常表现为上方排布；但它真正解决的是多层注音容器如何在上方与下方交替安排。也就是说，看到 alternate 时，应该先问“页面有没有多层标注”，而不是简单把它当作 over 的别名。

A B CAboveBelow

/* 多层注音保留默认交替语义 */
.ruby--layers {
  ruby-position: alternate;
}

/* 如果业务只有一层注音，直接写明意图更容易读 */
.ruby--single {
  ruby-position: over;
}

因此，单层读音组件可以显式写 over 或 under，多层注音组件再保留 alternate。这种写法把“当前组件的意图”留在 CSS 中，后续接手的人不必猜初始值为什么能满足布局。

把兼容性和语义降级放在组件边界

MDN 将 ruby-position 标为较新的跨设备能力，旧设备可能不完整支持。降级时不要把 ruby 改成一组绝对定位的 span，否则屏幕阅读器和文本复制都会失去原本的结构。更稳妥的做法是保留原生 ruby 标记，让不认识该属性的环境回到浏览器的默认 ruby 排布，再用能力查询为增强样式提供入口。

/* 默认保留原生 ruby 语义，旧环境仍能看到正文与注音 */
ruby rt {
  font-size: 0.5em;
  line-height: 1;
}

/* 支持该属性时再启用业务明确的排布选择 */
@supports (ruby-position: inter-character) {
  .ruby--bopomofo {
    ruby-position: inter-character;
  }
}

最后可以用一张小表收束判断：

相关问题

ruby-position 和 ruby-align 有什么区别？ 前者决定注音相对正文的位置，后者主要处理注音内容在可用宽度中的分布与对齐，不能互相替代。

为什么不建议用 top、left 模拟注音？ 绝对定位脱离了 ruby 的排版语义，遇到换行、竖排、字体变化和辅助技术时更容易失配。

旧浏览器不支持时应该隐藏注音吗？ 通常不需要。保留 ruby、rb、rt 结构，让浏览器使用默认排布比隐藏信息更稳妥。

参考资料：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/ruby-position