改行可能な ruby 要素と CSS ruby-align プロパティ

HTML の <ruby> 要素は、特に東アジア言語のテキスト表示を改善するための強力なツールです。この要素を使用すると、ベーステキストの上または横に発音の注釈やその他の補足情報を表示できます。Chrome 128 以降では、Ruby アノテーションが改行可能になり、ruby-align CSS プロパティを使用して Ruby テキストのスタイルを設定できるようになります。

<ruby> 要素は 2 つの主要な部分からなります。ルビーベース（メインテキスト）とルビーテキスト（アノテーション テキスト）は、<rt> 要素でマークアップされています。Ruby テキストは、次の例に示すように、ルビーベースの上または下に表示できます。

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

</ph>

<ruby style="ruby-position: under;">
  강남대로
  <rt>江南大路</rt>
</ruby>

</ph>

なぜそれがルビーと呼ばれているのでしょうか。

書籍が移動可能な型を使用して組版されたとき、これらの移動可能な型のサイズは、Perl や Diamond などのポイントサイズの名前で定義されていました。Ruby は、英国のシステムで 5.5 ポイントのサイズを表すために使用されました。日本のプリンタは、アノテーション テキストに Ruby（5.5 ポイント）のようなサイズが使用されるため、印刷物ではアノテーション テキスト自体を Ruby（発音上は Rubi）と呼ぶようになりました。アノテーション テキストが HTML に含まれていたとき、要素は <ruby> と定義されていました。ピカ（pc）は、CSS でフォントサイズの単位として使用されているもう 1 つのポイントサイズの名前です。

改行可能なルビー

以前は、ルビーベースまたはルビーテキストが 1 行全体より長い場合、個別に折り返されていたため、レイアウトの問題がありました。この問題を克服するために、ウェブ デベロッパーは複数の Ruby タグを使用してテキストをマークアップすることがよくあります。改行可能なルビーを使用すると、このようなマークアップの作成をスキップできます。

次の例では、中国の古典詩に対するルビー アノテーションとして、ピンイン（中国語のローマ字化）が追加されています。現在のレンダリング結果は、Ruby アノテーションのテキスト領域内にラップされます。

</ph>

改行可能な Ruby を使用して Chrome 128 からレンダリングすると、ラップされたベーステキストの上にラップされた Ruby アノテーション テキストが配置され、理想的なテキスト レンダリングを実現できます。

</ph>

日本文献に記載されている別の例では、長いルビー要素の前に改行があり、最初の行で空白スペースが作成されます。

</ph>

改行可能なルビーでは、長いルビー要素の真ん中に改行が挿入され、理想的なレイアウトになります。

</ph>

この機能では、基本文字が 4 個以下、アノテーション文字が 8 個以下の短い Ruby テキストは分割されません。

<ruby> 要素が別の <ruby> 要素内にネストされている場合、内部の <ruby> 要素は改行されません。

これにより、長いルビーテキストを使用する現在のウェブページの動作が変更されるため、この改行動作を無効にする必要がある場合、white-space:nowrap を適用すると通常どおりターゲット要素内での改行が無効になります。

ruby-align CSS プロパティ

Chrome 128 では、新しい CSS プロパティ ruby-align も利用できます。このプロパティは、キーワード値 space-around、space-between、start、center のいずれかを受け取り、ルビーのベーステキストとルビー アノテーション テキストの配置を制御します。

</ph>