ruby-align

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: ルビの要素の範囲内に配分するよう、スペースを付加することを示すキーワードです。また、ルビの周囲にもスペースを付加します。

形式文法

start | center | space-between | space-around

例

この HTML を、ruby-align のそれぞれの値でレンダリングします。

<ruby>
  <rb>確認用の長いテキスト</rb>
  <rp>（</rp><rt>短いルビ</rt><rp>）</rp>
</ruby>

ルビをベーステキストの始点に揃える

<ruby>
  <rb>確認用の長いテキスト</rb>
  <rp>（</rp><rt>短いルビ</rt><rp>）</rp>
</ruby>

ruby {
  ruby-align: start;
}

結果は以下のとおりです。

ルビをベーステキストの中央に揃える

<ruby>
  <rb>確認用の長いテキスト</rb>
  <rp>（</rp><rt>短いルビ</rt><rp>）</rp>
</ruby>

ruby {
  ruby-align: center;
}

結果は以下のとおりです。

ルビ要素の範囲内にスペースを配分する

<ruby>
  <rb>確認用の長いテキスト</rb>
  <rp>（</rp><rt>短いルビ</rt><rp>）</rp>
</ruby>

ruby {
  ruby-align: space-between;
}

結果は以下のとおりです。

ルビ要素内および周囲にスペースを配分する

<ruby>
  <rb>確認用の長いテキスト</rb>
  <rp>（</rp><rt>短いルビ</rt><rp>）</rp>
</ruby>

ruby {
  ruby-align: space-around;
}

結果は以下のとおりです。

仕様書

仕様書	状態	備考
CSS Ruby Layout Module Level 1 ruby-align の定義	草案	初回定義

ブラウザーの対応

BCD tables only load in the browser