Ruby 元素与 ruby-align 属性详解

发布日期：2025年2月21日

公告：此 Web 功能现已在所有三大浏览器引擎中可用。自 2024年12月11日起，作为基线新功能正式提供使用。

什么是 Ruby 元素？

HTML 的 <ruby> 元素用于在基准文本的上方或旁边显示补充信息，例如语音注释。该元素在东亚语言中被广泛使用。

一个完整的 Ruby 结构包含两个主要部分： - Ruby 基准：主文本内容 - Ruby 文本：用 <rt> 元素标记的注释文本

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

上面的示例演示了如何为日文基准文本添加英文发音注释。

ruby-align 属性

概述

CSS 属性 ruby-align 用于控制基准文本与注释文本之间的对齐方式。该属性接受以下关键字值之一： - space-around - space-between - start - center

语法

ruby {
  ruby-align: start | center | space-between | space-around;
}

取值说明

• start：将注释文本与基准文本的起始边缘对齐
• center：将注释文本在基准文本上方居中对齐
• space-between：在基准文本宽度内均匀分布注释文本
• space-around：在注释字符周围均匀分布空间，包括首尾

使用示例

<ruby class="japanese-annotation">
  日本語 <rt>Japanese</rt>
</ruby>

.japanese-annotation {
  ruby-align: center;
  font-size: 1.2em;
}

浏览器支持

该功能目前已得到所有主要浏览器的支持，包括： - Chrome 119+ - Firefox 98+ - Safari 17+

使用时可放心在现代 Web 项目中集成 Ruby 注释功能，为多语言内容提供更好的用户体验。