Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

ruby-overhang

ruby-overhang は CSS のプロアpティで、<ruby> の注釈が周囲のテキストからはみ出すかどうかを指定します。

ルビ組版

対応ブラウザ

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

基本構文

CSS 
ruby {
  ruby-overhang: auto;
}
.strict-ruby {
  ruby-overhang: none;
}

ライブデモ

auto（はみ出し許可）

CSS の auto（はみ出し許可） パターンです。

プレビュー全画面表示

none（はみ出し禁止）

CSS の none（はみ出し禁止） パターンです。

プレビュー全画面表示

長いルビ

CSS の 長いルビ パターンです。

プレビュー全画面表示

実務での使いどころ

  • 日本語ルビのオーバーハング制御

    ルビ文字がベーステキストの幅を超えた場合に、隣接する仮名にはみ出す「ルビ掛け」を許可し、自然な組版を実現します。

注意点

  • 現時点ではSafari 18.2のみのサポートであり、クロスブラウザ対応が必要な場合は注意が必要です。

アクセシビリティ

  • ルビのはみ出しは視覚的な表現のみに影響し、スクリーンリーダーの読み上げには影響しません。

参考リンク