ruby-align

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
適用対象ルビベース、ルビ注釈、ルビベースコンテナー、ルビ注釈コンテナー
継承あり
計算値指定通り
アニメーションの種類計算値の型による

形式文法

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報