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

display: ruby

東アジア言語のルビ（振り仮名）表示をCSS displayプロパティで制御する機能です。HTML の<ruby>要素を使わずにルビレイアウトを構築でき、カスタム要素やXMLベースのコンテンツにルビ表示を適用できます。ただし、Firefox以外ではサポートされていません。

ルビ表示東アジアタイポグラフィ

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.display.ruby
121
12
38
121
CSS プロパティ
ruby-base
12
38
ruby-base-container
12
38
ruby-text
121
12
38
121
ruby-text-container
12
38
alternate
実験的
88
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (79)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (79)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (79)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (79)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (79)

基本構文

CSS 
.ruby { display: ruby; }
.ruby-base { display: ruby-base; }
.ruby-text { display: ruby-text; }
.ruby-base-container {
  display: ruby-base-container;
}

ライブデモ

rubydisplay

CSS rubydisplay demo.

プレビュー全画面表示

Multipleruby

CSS Multipleruby demo.

プレビュー全画面表示

HTML Rubyelement

CSS HTML rubyelement demo.

プレビュー全画面表示

実務での使いどころ

  • カスタム要素でのルビ表示

    Webコンポーネントやカスタム要素に対してdisplay: rubyを適用し、標準HTML以外の構造でも振り仮名表示を実現します。

注意点

  • Firefox以外のブラウザではサポートされていないため、HTML の<ruby>要素を使用するフォールバックが必要です。

アクセシビリティ

  • ルビテキストがスクリーンリーダーで正しく読み上げられるよう、適切なARIA属性を付与してください。

参考リンク