Newly available 条件付きOK。主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。フォールバックを検討。
タイポグラフィ Newly available

ruby-align

ruby-alignは、ルビ注釈テキストが利用可能なスペースを満たさない場合の配置方法を制御するCSSプロパティです。start、center、space-between、space-aroundなどの値を指定でき、ルビテキストの位置や分散方法を調整します。日本語や中国語のルビ（振り仮名）表示の品質を向上させるために重要な機能です。

ルビ配置

概要

ruby-alignは、ルビ注釈テキストが利用可能なスペースを満たさない場合の配置方法を制御するCSSプロパティです。start、center、space-between、space-aroundなどの値を指定でき、ルビテキストの位置や分散方法を調整します。日本語や中国語のルビ（振り仮名）表示の品質を向上させるために重要な機能です。

対応ブラウザ

デスクトップ

Chrome 128+
Edge 128+
Safari 18.2+
Firefox 38+

モバイル

Chrome Android 128+
Safari iOS 18.2+
Firefox Android 38+

基本構文

CSS 
ruby {
  ruby-align: space-around;
}
.centered-ruby {
  ruby-align: center;
}

実務での使いどころ

  • 振り仮名の配置調整

    漢字の上に表示される振り仮名の文字間隔と配置を調整し、美しい日本語組版を実現します。

注意点

  • ruby-alignの各値の動作はブラウザ間で微妙に異なる場合があるため、主要ブラウザでの表示を確認してください。

アクセシビリティ

  • ルビテキストはスクリーンリーダーで読み上げられるため、正しい読み仮名を提供することがアクセシビリティ上重要です。

参考リンク