CSS ruby-align 怎样调整注音与汉字的对齐方式

如果页面里有中文、日文或教材注音， 里的注音经常会遇到一个细节：基准文字和上方的小字长度不一样，浏览器默认分布后，注音可能偏在一侧，或者多组注音之间的空隙不符合版式。这个问题不需要用 JavaScript 逐个测宽，CSS 的 ruby-align 就是用来控制 ruby 注音分布的属性。

先把注音结构写正确，再根据内容选择 start、center、space-between 或 space-around。ruby-align 只调整注音在基准文本上的分布，不负责把注音移动到上方或下方；旧浏览器忽略它时，仍应保留可读的默认 ruby 排版。

先看 ruby-align 管什么

是注音容器， 表示基准文字， 表示注音文本。ruby-align 应该理解为“注音内容在基准文本范围内怎样分布”，而不是“注音放在文字上面还是下面”。后一个问题属于 ruby-position 的职责。

这一区分很重要。若只想让注音从基准文本起点对齐，改的是 ruby-align；若想改变注音位于文本上方还是下方，应该另看 ruby-position。两者可以同时出现在同一条 CSS 规则里，但解决的是不同维度。

从手工调间距迁移到 ruby-align

旧项目里常见的做法是给 rt 加固定的 letter-spacing，或者在每组注音之间塞空格。这种写法把排版结果写死在某一种字体、字号和注音长度上，换成更长的词或切换语言后很容易失衡。迁移时，先删除人为填充的空格，再让属性表达真正的排版意图。

  漢字
  かんじ

如果项目已经有组件样式，可以把属性放在组件的 ruby 容器上，而不是只给某一个 rt 设置。这样做能把“这一组注音采用什么分布方式”集中表达出来，后续切换成居中或两端分布时也只改一个位置。

四个取值怎样选

MDN 当前列出的四个常用取值分别对应不同的空间分配意图：start 从起点分布，center 居中分布，space-between 把额外空间分配到注音项之间，space-around 则在注音项周围也保留空间。不要只因为“看起来更平均”就选择 space-between，它更适合存在多组 ruby 内容的场景。

写成组件变量后，调用方可以只选择语义，而不用接触底层的间距细节：

/* 中文注释：默认采用居中，只有多组注音组件才切换到两端分布 */
.ruby-label {
  ruby-align: center;
}

/* 中文注释：space-between 把可用空间放在相邻注音项之间 */
.ruby-label--many {
  ruby-align: space-between;
}

长注音与多组 ruby 的回归检查

迁移不能只用“漢字 / かんじ”这一组短样例判断。至少准备三种内容：注音比基准文本短、注音明显更长、同一行出现多组 ruby。检查重点不是某个像素值，而是注音是否仍然能和对应的基准字建立清晰关系。

1. 先确认 DOM 中每个 rt 都紧跟自己的基准文本，不能依靠额外空格猜配对关系。
2. 再分别切换四个取值，观察组件在短词、长词和多组注音下的空间语义是否符合设计稿。
3. 最后在不加载这条 CSS 属性的情况下阅读内容，确认默认 ruby 结构仍然可理解。

如果问题是注音跑到了文字下方、注音和基准文本重叠，或者书写方向变化后上下位置不对，优先检查 ruby-position、书写模式和字体，而不是继续调整 ruby-align。把不同维度混在同一条规则里，往往会让回归难以定位。

兼容边界与迁移清单

ruby-align 是渐进增强属性：不支持它的环境会忽略声明，保留浏览器原本的 ruby 布局。因此不要把它作为唯一的信息传递手段，也不要把关键含义只放在注音的视觉位置上。可以保留语义化的 rb、rt 结构，再按项目支持策略决定是否加一层能力判断。

/* 中文注释：基础结构先保证可读，支持属性的环境再改善分布 */
.ruby-label rt {
  font-size: 0.65em;
}

@supports (ruby-align: center) {
  /* 中文注释：能力存在时才启用组件的居中排版 */
  .ruby-label {
    ruby-align: center;
  }
}

• 删除依赖空格、伪元素或固定字距的临时补偿。
• 保留 ruby、rb、rt 的语义关系。
• 用 start、center、space-between、space-around 表达真实的空间意图。
• 把注音上下位置问题交给 ruby-position，不要让 ruby-align 承担额外职责。
• 为短注音、长注音、多组注音和不支持属性的环境各保留一个回归样例。

一句话总结：ruby-align 解决的是注音项怎样分布，不是注音放在哪里。先把结构和职责分开，再根据注音长度与组数选择取值，迁移后的 CSS 才会比手工空格更稳定。

相关问题

ruby-align 和 text-align 有什么区别？

text-align 面向普通行内内容的对齐；ruby-align 面向 ruby 注音结构中的分布语义，不能简单互换。

为什么设置 ruby-align 后看起来没有变化？

可能是只有一组短注音、可分配的额外空间很少，或者当前环境忽略了该属性。先用长注音和多组 ruby 作为对比样例，再检查结构和能力边界。

注音位置不对应该改哪个属性？

如果问题是上下位置，先看 ruby-position；如果问题是同一基准范围内的起点、居中或间距分布，再看 ruby-align。

参考资料

• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/ruby-align
• https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Ruby_layout
• https://drafts.csswg.org/css-ruby/#ruby-align-property