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

Mariko Kosaka
X

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

<ruby> 元素由两个主要部分组成：ruby base（主要文本）和 ruby text（注解文本，使用 <rt> 元素标记）。如下例所示，Ruby 文本可以显示在红宝石基底之上或之下。

<ruby>
  絵文字
  <rt>emoji</rt>
</ruby>
<ph type="x-smartling-placeholder">
</ph> 英语发音作为日语基础文本上的注释。
英语发音作为日语基础文本上的注释。
。 

<ruby style="ruby-position: under;">
  강남대로
  <rt>江南大路</rt>
</ruby>
在韩语韩语下方添加了中文注释
在韩语韩语下方添加了中文注释。

为什么叫红宝石？

使用可移动类型设置图书排版时，这些可移动类型的大小由点大小名称定义，例如 Perl 和 Diamond。英国人使用 Ruby 来表示 5.5 磅。日本打印机使用类似于 Ruby（5.5 磅）的尺寸来显示注释文本，因此开始在打印中将该注释文本本身称为 Ruby（或 Rubi 的发音）。如果 HTML 中添加了注释文本，则该元素定义为 <ruby>。Pica (pc) 是 CSS 中用作字体大小单位的另一个历史磅值名称。

破线红宝石

以前，如果红宝石基底或红宝石文本比整行长，那么它们会被单独封装，造成布局困难。为了解决这个问题，网络开发者通常会使用多个 ruby 标记来标记一段文本。使用可换行的红宝石时，您可以跳过创建此类标记的步骤。

以下示例将拼音（中文罗马拼音）添加为一组对中国古典诗歌的红宝石注释。当前渲染结果封装在 Ruby 注解文本区域内。

在 Chrome 128 之前的版本中，包含红宝石长注释文本的呈现结果。
在 Chrome 128 之前的版本中，包含红宝石长注释文本的呈现结果。

从 Chrome 128 渲染时，使用断行红宝石将红宝石注解文本封装在封装的基本文本上，从而实现理想的文本渲染。

使用 Chrome 128 中的长红宝石注释文本呈现的结果。
使用长红宝石注释文本呈现 Chrome 128 的结果。

在日本文学的另一个示例中，换行符发生在长红宝石元素之前，在第一行中形成了一个空白区域。

显示 Chrome 128 之前的版本并包含红宝石长文本的呈现结果。
在 Chrome 128 之前版本，包含红宝石长文本的呈现结果。

使用可换行红宝石时，换行符位于长红宝石元素的中间，从而实现理想的布局。

Chrome 128 中以红宝石长文本呈现的结果。
呈现 Chrome 128 中以红宝石长文本显示的结果。

此功能不会破坏包含少于或等于 4 个基本字符且少于或等于 8 个注释字符的短红宝石文本。

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

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

ruby-align CSS 属性

浏览器支持

  • x
  • x
  • 38

来源

Chrome 128 也提供了新的 CSS 属性 ruby-align。该属性接受 space-around、space-between、start 和 center 中的一个关键字值，并控制 Ruby 基本文本与 Ruby 注解文本的对齐方式。

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