はじめに
Chrome 151 で CSS ruby-overhang プロパティが追加されました。
ルビ（<ruby>）はふりがなや注釈をテキストに付ける HTML 要素です。
ルビ文字がベーステキストより長い場合、隣接するテキストの上にはみ出す（オーバーハング）ことがあります。
ruby-overhang はこのはみ出し動作を CSS から制御できるプロパティです。
日本語コンテンツを扱う Web 開発者にとって待望の機能です。
ルビとオーバーハングのおさらい
<p>
名探偵コナン 隻眼の<ruby>残像<rt>フラッシュバック</rt></ruby>
</p>
上記のように、ルビ文字（<rt>）がベーステキストより長いと、
デフォルトでは隣接する文字の上にはみ出します。これが「オーバーハング」です。
フラッシュバック
残像
ruby-overhang の構文
形式文法は以下のとおりです（CSS Ruby Annotation Layout Module Level 1 より）。
ruby-overhang = auto | spaces
/* 以下のように*/
ruby-overhang: auto;
ruby-overhang: none;
各値の挙動
auto（初期値）
ルビの注釈コンテナーがベースコンテナーより長い場合、注釈が隣接するテキストと部分的に重なることがあります。はみ出しを行うかどうか、その程度はユーザーエージェントが決定します。ただし、隣接する <rt> 要素や display: ruby-base / ruby-text の要素とは重なりません。
フラッシュバック
残像コナン ← 「コ」「ナ」にはみ出す可能性あり
none
ルビが隣接するコンテナーを越えてはみ出すことを禁止します。<ruby> 要素はインラインボックスのように振る舞い、境界線内にのみコンテンツが収まります。
フラッシュバック
残像 ← はみ出さない（ベースより長い分だけスペースが確保される）
Sample
以下のサンプルが正常に動作するためには、ブラウザがChrome151以上であることを確認してください。
See the Pen ruby-overhang by degudegu2510 | Qiita (@degudegu2510) on CodePen.
どのような場面で使うか
- レイアウトが崩れやすい場面で
none- カード UI やテーブルセルなど、幅が決まっているコンテナでルビを使う場合、オーバーハングによってレイアウトが意図せず崩れることがあります
-
noneを指定することで、ルビをコンテナ内に確実に収めることができます。
- 読みやすさを優先する場合は
auto- 小説や記事など、読みやすさを重視するコンテンツでは
autoが適しています - 隣接するテキストとの自然な間隔を保ちながら、ルビが読みにくくなるのを防ぎます。
- 小説や記事など、読みやすさを重視するコンテンツでは
ブラウザ対応状況
| ブラウザ | 対応状況 |
|---|---|
| Chrome | 151 以上対応 |
| Firefox | 未対応（2026年7月時点） |
| Safari | 18.2 以上対応 |
現時点では Chrome 限定です。他ブラウザでは ruby-overhang を指定しても無視され、デフォルト（auto 相当）の挙動になります。
まとめ
ruby-overhang はシンプルなプロパティですが、日本語コンテンツで「ルビが隣の文字にかぶってしまう」問題に長年悩まされてきた開発者には嬉しい追加です。
- レイアウトを崩したくない場合は
none - 読みやすさを重視し自然なはみ出しを UA に任せたい場合は
auto
今後他のブラウザへの実装も期待されるプロパティです。
- 参考
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。