Experimental
これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
CSS の ruby-align プロパティは、ベースに対するさまざまなルビの配分を定義します。
/* キーワード値 */
ruby-align: start;
ruby-align: center;
ruby-align: space-between;
ruby-align: space-around;
/* グローバル値 */
ruby-align: inherit;
ruby-align: initial;
ruby-align: unset;
| 初期値 | space-around |
|---|---|
| 適用対象 | ルビベース、ルビ注釈、ルビベースコンテナー、ルビ注釈コンテナー |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
構文
値
start- ルビをベーステキストの始点に揃えることを示すキーワードです。
center- ルビをベーステキストの中央に揃えることを示すキーワードです。
space-between- ルビの要素の範囲内に配分するよう、スペースを付加することを示すキーワードです。
space-around- ルビの要素の範囲内に配分するよう、スペースを付加することを示すキーワードです。また、ルビの周囲にもスペースを付加します。
形式文法
例
この HTML を、ruby-align のそれぞれの値でレンダリングします。
<ruby>
<rb>確認用の長いテキスト</rb>
<rp>（</rp><rt>短いルビ</rt><rp>）</rp>
</ruby>
ルビをベーステキストの始点に揃える
ruby {
ruby-align: start;
}結果は以下のとおりです。
ルビをベーステキストの中央に揃える
ruby {
ruby-align: center;
}結果は以下のとおりです。
ルビ要素の範囲内にスペースを配分する
ruby {
ruby-align: space-between;
}結果は以下のとおりです。
ルビ要素内および周囲にスペースを配分する
ruby {
ruby-align: space-around;
}結果は以下のとおりです。
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Ruby Layout Module Level 1 ruby-align の定義 |
草案 | 初回定義 |
ブラウザーの対応
BCD tables only load in the browser
関連情報
- HTML のルビ関連要素:
<ruby>,<rt>,<rp>,<rtc> - CSS のルビ関連プロパティ:
ruby-position,ruby-merge