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

ruby-align

ruby-align は CSS のプロパティで、ベースに対するさまざまなルビ要素の配分を定義します。

ルビ配置

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
ruby-align
128
128
38
18.2
128
18.2
center
128
128
38
18.2
128
18.2
space-around
128
128
38
18.2
128
18.2
space-between
128
128
38
18.2
128
18.2
start
128
128
38
18.2
128
18.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

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

ライブデモ

space-around

CSS Space-around demo.

プレビュー全画面表示

center

CSS Center demo.

プレビュー全画面表示

space-between

CSS Space-between demo.

プレビュー全画面表示

実務での使いどころ

  • 振り仮名の配置調整

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

注意点

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

アクセシビリティ

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

参考リンク