断线 <红宝石>和 CSS ruby-align 属性

Mariko Kosaka

HTML <ruby> 元素是一款强大的文本呈现增强工具，对于东亚语言尤其如此。借助此元素，您可以在基本文本上方或旁边显示发音注释或其他补充信息。从 Chrome 128 开始，Ruby 注解将支持换行，并且您可以使用 ruby-align CSS 属性设置 Ruby 文本的样式。

<ruby> 元素由两个主要部分组成，ruby base 是主要文本，ruby text 是注释文本，用 <rt> 元素标记。Ruby 文本可以显示在 Ruby 基准上方或下方，如以下示例所示。

<ruby>
  絵文字
  <rt>emoji</rt>
</ruby>

英语发音作为日语基础文本的注释。

<ruby style="ruby-position: under;">
  강남대로
  <rt>江南大路</rt>
</ruby>

在韩语韩文字母下方添加了中文注释。

为什么它被称为“红宝石”？

使用可移动字体排版书籍时，这些可移动字体的大小是用点号大小名称（例如 Perl 和 Diamond）定义的。在英国系统中，Ruby 用于表示 5.5 号字体。日本打印机使用的注释文本大小与 Ruby（5.5 点）相似，因此在印刷品中开始将注释文本本身称为 Ruby（或发音为 Rubi）。将注释文本添加到 HTML 中时，该元素被定义为 <ruby>。还有一种历史上用于 CSS 中作为字号单位的点号名称，即“pica”(pc)。

可换行的 Ruby

以前，如果 ruby-base 或 ruby-text 比整行更长，则会单独换行，这会导致布局问题。为了解决此问题，Web 开发者通常会使用多个 Ruby 标记来标记一段文本。借助可换行 Ruby，您可以跳过创建此类标记。

在以下示例中，我们将拼音（汉语罗马拼音）添加为中国古典诗歌的一组 Ruby 注释。当前渲染结果会在罗马音标注释文本区域内换行。

Chrome 128 之前的渲染结果，其中包含长 Ruby 注释文本。

使用可换行 Ruby 从 Chrome 128 进行渲染会将换行 Ruby 注释文本放在换行基本文本上方，从而实现理想的文本渲染。

Chrome 128 中包含长 Ruby 注释文本的渲染结果。

在日本文学的另一个示例中，换行符出现在长 ruby 元素之前，在第一行中创建了一个空格。

Chrome 128 之前使用长 Ruby 文本的渲染结果。

使用可换行罗马音标时，换行符会放置在长罗马音标元素的中间，以实现理想的布局。

Chrome 128 中包含长 Ruby 文本的渲染结果。

此功能不会对少于或等于 4 个基本字符和少于或等于 8 个注释字符的短 Ruby 文本进行换行。

当 <ruby> 元素嵌套在另一个 <ruby> 元素内时，内部 <ruby> 元素不会换行。

由于这会更改使用长 Ruby 文本的当前网页的行为，因此如果您需要停用此换行行为，应用 white-space:nowrap 会像往常一样停用目标元素内的换行。

ruby-align CSS 属性

浏览器支持

• 128
• 128
• 38
• 

来源

Chrome 128 及更高版本还提供新的 CSS 属性 ruby-align。此属性接受关键字值 space-around、space-between、start 和 center 之一，并控制罗马音标基本文本和罗马音标注释文本的对齐方式。

显示 ruby-align 属性用例的图片。