ruby-align
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used 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: unset;
構文
値
start
-
ルビをベーステキストの始点に揃えることを示すキーワードです。
center
-
ルビをベーステキストの中央に揃えることを示すキーワードです。
space-between
-
ルビの要素の範囲内に配分するよう、スペースを付加することを示すキーワードです。
space-around
-
ルビの要素の範囲内に配分するよう、スペースを付加することを示すキーワードです。また、ルビの周囲にもスペースを付加します。
公式定義
初期値 | 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 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- HTML のルビ関連要素:
<ruby>
,<rt>
,<rp>
,<rtc>
- CSS のルビ関連プロパティ:
ruby-position
,ruby-merge