HTML の <ruby> 要素は、特に東アジア言語のテキスト表示を改善するための強力なツールです。この要素を使用すると、親文字の上下左右に発音やその他の補足情報を表示できます。Chrome 128 以降では、Ruby 要素が改行可能になり、またruby-align CSS プロパティを使用してルビと親文字の揃え方を設定できるようになります。
<ruby> 要素は 2 つの主要な部分からなります。親文字（メインテキスト）とルビ（アノテーション テキスト）は、<rt> 要素でマークアップされています。ルビは、次の例に示すように、親文字の上または下に表示できます。
<ruby>
絵文字
<rt>emoji</rt>
</ruby>
<ruby style="ruby-position: under;">
강남대로
<rt>江南大路</rt>
</ruby>
ルビと呼ばれるのはなぜですか？
本が活版印刷されていた時代、活字のサイズは、Perl や Diamond などのポイントサイズの名前で定義されていました。Ruby は、英国のシステムで 5.5 ポイントのサイズを表すために使用されました。日本での印刷は、アノテーション テキストに Ruby（5.5 ポイント）のようなサイズが使用されるため、印刷物ではアノテーション テキスト自体を Ruby（発音上はルビ）と呼ぶようになりました。アノテーション テキストを HTML に含めるために、<ruby> 要素が定義されました。パイカ（pc）は、CSS でフォントサイズの単位として使用されているもう 1 つのポイントサイズの名前です。
改行可能なruby要素
以前は、親文字またはルビが 1 行の全体より長い場合、個別に折り返されていたため、レイアウトの問題がありました。これに対処するために、ウェブ デベロッパーは多くの場合、複数の Ruby タグを使用してテキストをマークアップします。改行可能なruby要素で、そのようなマークアップの簡略化できます。
次の例では、中国の古典詩に対するルビとして、ピンイン（中国語のローマ字化）が追加されています。現在のレンダリング結果は、親文字とルビが個別に改行されます。
Chrome 128 からruby要素が改行可能になり、親文字とルビが対になったまま改行され理想的なレンダリングを実現できます。
日本語の文献に記載されている別の例では、長いruby要素の前に改行が入り、最初の行で不自然な空白ができます。
改行可能なruby要素では、長いruby要素の内部で分割され、理想的なレイアウトになります。
Chrome 128 の実装では、親文字が4文字以下、かつルビが8文字以下の短いruby要素は分割されません。
<ruby> 要素が別の <ruby> 要素内にネストされている場合、内側の <ruby> 要素は改行されません。
これにより、長いruby要素を使用する現在のウェブページの動作が変更されるため、この改行動作を無効にする必要がある場合、white-space:nowrap を適用すると通常どおりターゲット要素内での改行が無効になります。
ruby-align CSS プロパティ
Chrome 128 では、新しい CSS プロパティ ruby-align も利用できます。このプロパティは、キーワード値 space-around、space-between、start、center のいずれかを受け取り、ruby要素内の親文字とルビの配置を制御します。
