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

ruby-overhang

ruby-overhangは、ルビテキストがベーステキストの幅を超えた場合に、隣接する文字のスペースにはみ出すことを許可するかどうかを制御するCSSプロパティです。日本語組版では、ルビが隣接する仮名文字にわずかにはみ出す「ルビ掛け」が一般的で、この機能により自然で美しい組版が実現できます。

ルビ組版

概要

ruby-overhangは、ルビテキストがベーステキストの幅を超えた場合に、隣接する文字のスペースにはみ出すことを許可するかどうかを制御するCSSプロパティです。日本語組版では、ルビが隣接する仮名文字にわずかにはみ出す「ルビ掛け」が一般的で、この機能により自然で美しい組版が実現できます。

対応ブラウザ

デスクトップ

Chrome 未対応
Edge 未対応
Safari 18.2+
Firefox 未対応

モバイル

Chrome Android 未対応
Safari iOS 18.2+
Firefox Android 未対応

基本構文

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

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク