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

Mariko Kosaka

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

<ruby> 元素由两个主要部分组成:ruby base(主要文本)和 ruby text(注解文本,使用 <rt> 元素标记)。如下例所示,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>。Pica (pc) 是 CSS 中用作字体大小单位的另一个历史磅值名称。

破线红宝石

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

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

<ph type="x-smartling-placeholder">
</ph> 在 Chrome 128 之前的版本中,包含红宝石长注释文本的呈现结果。
在 Chrome 128 之前的版本中,包含红宝石长注释文本的呈现结果。

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

<ph type="x-smartling-placeholder">
</ph> 呈现 Chrome 128 中采用长红宝石注释文本时的结果。
使用长红宝石注释文本呈现 Chrome 128 的结果。

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

<ph type="x-smartling-placeholder">
</ph> 显示 Chrome 128 之前的版本并包含红宝石长文本的呈现结果。
在 Chrome 128 之前版本,包含红宝石长文本的呈现结果。

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

<ph type="x-smartling-placeholder">
</ph> Chrome 128 中以红宝石长文本呈现的结果。
呈现 Chrome 128 中以红宝石长文本显示的结果。

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

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

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

ruby-align CSS 属性

浏览器支持

  • Chrome:128。 <ph type="x-smartling-placeholder">
  • 边缘:128。 <ph type="x-smartling-placeholder">
  • Firefox:38。 <ph type="x-smartling-placeholder">
  • Safari:不支持。 <ph type="x-smartling-placeholder">

来源

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

<ph type="x-smartling-placeholder">
</ph> 显示 ruby-align 属性用例的图片。
显示 ruby-align 属性用例的图片。