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.

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ruby-align
center
space-around
space-between
start

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

関連情報