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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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

ブラウザーの互換性

関連情報