display: ruby
東アジア言語のルビ（振り仮名）表示をCSS displayプロパティで制御する機能です。HTML の<ruby>要素を使わずにルビレイアウトを構築でき、カスタム要素やXMLベースのコンテンツにルビ表示を適用できます。ただし、Firefox以外ではサポートされていません。
概要
東アジア言語のルビ（振り仮名）表示をCSS displayプロパティで制御する機能です。HTML の<ruby>要素を使わずにルビレイアウトを構築でき、カスタム要素やXMLベースのコンテンツにルビ表示を適用できます。ただし、Firefox以外ではサポートされていません。
対応ブラウザ
デスクトップ
Chrome 未対応
Edge 未対応
Safari 未対応
Firefox 88+
モバイル
Chrome Android 未対応
Safari iOS 未対応
Firefox Android 88+
基本構文
CSS
.ruby { display: ruby; }
.ruby-base { display: ruby-base; }
.ruby-text { display: ruby-text; }
.ruby-base-container {
display: ruby-base-container;
}実務での使いどころ
-
カスタム要素でのルビ表示
Webコンポーネントやカスタム要素に対してdisplay: rubyを適用し、標準HTML以外の構造でも振り仮名表示を実現します。
注意点
- Firefox以外のブラウザではサポートされていないため、HTML の<ruby>要素を使用するフォールバックが必要です。
アクセシビリティ
- ルビテキストがスクリーンリーダーで正しく読み上げられるよう、適切なARIA属性を付与してください。