このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
ruby-align
Baseline 2024Newly available
Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
ruby-align はCSS のプロパティで、ベースに対するさまざまなルビ要素の配分を定義します。
構文
css
/* キーワード値 */ruby-align: start;ruby-align: center;ruby-align: space-between;ruby-align: space-around;/* グローバル値 */ruby-align: inherit;ruby-align: initial;ruby-align: revert;ruby-align: revert-layer;ruby-align: unset;値
startルビをベーステキストの始点に揃えることを示すキーワードです。
centerルビをベーステキストの中央に揃えることを示すキーワードです。
space-betweenルビの要素の範囲内に割り付けるために、空間を付加することを示すキーワードです。
space-aroundルビの要素の範囲内に割り付けるために、空間を付加し、ルビの周囲にも空間を付加することを示すキーワードです。
公式定義
| 初期値 | space-around |
|---|---|
| 適用対象 | ルビベース、ルビ注釈、ルビベースコンテナー、ルビ注釈コンテナー |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |
形式文法
ruby-align =
start|
center|
space-between|
space-around
例
ルビをベーステキストの先頭に揃える
HTML
html
<ruby> <rb>確認用の長いテキスト</rb> <rp>（</rp><rt>短いルビ</rt><rp>）</rp></ruby>CSS
css
ruby { ruby-align: start;}結果
ルビをベーステキストの中央に揃える
HTML
html
<ruby> <rb>確認用の長いテキスト</rb> <rp>（</rp><rt>短いルビ</rt><rp>）</rp></ruby>CSS
css
ruby { ruby-align: center;}結果
ルビ要素の範囲内に空間を配分する
HTML
html
<ruby> <rb>確認用の長いテキスト</rb> <rp>（</rp><rt>短いルビ</rt><rp>）</rp></ruby>CSS
css
ruby { ruby-align: space-between;}結果
ルビ要素内および周囲に空間を配分する
HTML
html
<ruby> <rb>確認用の長いテキスト</rb> <rp>（</rp><rt>短いルビ</rt><rp>）</rp></ruby>CSS
css
ruby { ruby-align: space-around;}結果
仕様書
| Specification |
|---|
| CSS Ruby Annotation Layout Module Level 1 # ruby-align-property |
ブラウザーの互換性
関連情報
- HTML のルビ関連要素:
<ruby>,<rt>,<rp>,<rtc> - CSS のルビ関連プロパティ:
ruby-position,ruby-merge