ruby-align がベースラインに新規追加

Mariko Kosaka

公開日: 2025 年 2 月 21 日

HTML の <ruby> 要素を使用すると、ベーステキストの上にまたは横に音声アノテーションなどの補足情報を表示できます。東アジアの言語でよく使用されます。

<ruby> 要素は、メインテキストであるルビーベースと、<rt> 要素でマークアップされたアノテーション テキストであるルビーテキストの 2 つの主要部分で構成されています。


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

日本語のテキストに英語のルビ アノテーション「絵文字」が付いています。 日本語のベーステキストに対するアノテーションとして英語の発音。

ruby-align

CSS プロパティ ruby-align は、ルビのベーステキストとルビ アノテーション テキストの配置を制御します。このプロパティには、space-aroundspace-betweenstartcenter のいずれかのキーワード値を指定できます。

中国語のテキストにピンイン ルビー アノテーションを適用した例。
ruby-align プロパティのユースケースを示す画像。