HTML <ruby>
元素是用于增强文本呈现效果的强大工具,尤其是对于东亚语言。此元素可让您在基本文本上方或旁边显示语音注释或其他补充信息。从 Chrome 128 开始,Ruby 注解将可以换行,并且您可以使用 ruby-align
CSS 属性设置 Ruby 文本的样式。
<ruby>
元素由两个主要部分组成:ruby base(主要文本)和 ruby text(注解文本,使用 <rt>
元素标记)。如下例所示,Ruby 文本可以显示在红宝石基底之上或之下。
<ruby>
絵文字
<rt>emoji</rt>
</ruby>
![英语发音作为日语基础文本上的注释。](https://developer.chrome.com/static/blog/line-breakable-ruby/image/ruby_sample_j.png?authuser=002&hl=zh-cn)
<ruby style="ruby-position: under;">
강남대로
<rt>江南大路</rt>
</ruby>
![在韩语韩语下方添加了中文注释](https://developer.chrome.com/static/blog/line-breakable-ruby/image/ruby_sample_k.png?authuser=002&hl=zh-cn)
为什么叫红宝石?
使用可移动类型设置图书排版时,这些可移动类型的大小由点大小名称定义,例如 Perl 和 Diamond。英国人使用 Ruby 来表示 5.5 磅。日本打印机使用类似于 Ruby(5.5 磅)的尺寸来显示注释文本,因此开始在打印中将该注释文本本身称为 Ruby(或 Rubi 的发音)。如果 HTML 中添加了注释文本,则该元素定义为 <ruby>
。Pica (pc
) 是 CSS 中用作字体大小单位的另一个历史磅值名称。
破线红宝石
以前,如果红宝石基底或红宝石文本比整行长,那么它们会被单独封装,造成布局困难。为了解决这个问题,网络开发者通常会使用多个 ruby 标记来标记一段文本。使用可换行的红宝石时,您可以跳过创建此类标记的步骤。
以下示例将拼音(中文罗马拼音)添加为一组对中国古典诗歌的红宝石注释。当前渲染结果封装在 Ruby 注解文本区域内。
<ph type="x-smartling-placeholder">![在 Chrome 128 之前的版本中,包含红宝石长注释文本的呈现结果。](https://developer.chrome.com/static/blog/line-breakable-ruby/image/image_1.png?authuser=002&hl=zh-cn)
从 Chrome 128 渲染时,使用断行红宝石将红宝石注解文本封装在封装的基本文本上,从而实现理想的文本渲染。
<ph type="x-smartling-placeholder">![呈现 Chrome 128 中采用长红宝石注释文本时的结果。](https://developer.chrome.com/static/blog/line-breakable-ruby/image/image_2.png?authuser=002&hl=zh-cn)
在日本文学的另一个示例中,换行符发生在长红宝石元素之前,在第一行中形成了一个空白区域。
<ph type="x-smartling-placeholder">![显示 Chrome 128 之前的版本并包含红宝石长文本的呈现结果。](https://developer.chrome.com/static/blog/line-breakable-ruby/image/image_3.png?authuser=002&hl=zh-cn)
使用可换行红宝石时,换行符位于长红宝石元素的中间,从而实现理想的布局。
<ph type="x-smartling-placeholder">![Chrome 128 中以红宝石长文本呈现的结果。](https://developer.chrome.com/static/blog/line-breakable-ruby/image/image_4.png?authuser=002&hl=zh-cn)
此功能不会破坏包含少于或等于 4 个基本字符且少于或等于 8 个注释字符的短红宝石文本。
当一个 <ruby>
元素嵌套在另一个 <ruby>
元素内时,内部 <ruby>
元素不会换行。
由于这会更改使用长红宝石文本的当前网页的行为,因此如果您需要停用这种换行行为,应用 white-space:nowrap
会像往常一样停用目标元素内的换行。
ruby-align
CSS 属性
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
Chrome 128 也提供了新的 CSS 属性 ruby-align
。该属性接受 space-around
、space-between
、start
和 center
中的一个关键字值,并控制 Ruby 基本文本与 Ruby 注解文本的对齐方式。
![显示 ruby-align 属性用例的图片。](https://developer.chrome.com/static/blog/line-breakable-ruby/image/ruby_align.png?authuser=002&hl=zh-cn)