ruby-align
Baseline
2024
Newly 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 |
ブラウザーの互換性
Loading…
関連情報
- HTML のルビ関連要素:
<ruby>,<rt>,<rp>,<rtc> - CSS のルビ関連プロパティ:
ruby-position,ruby-merge