ruby-align

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;

構文

値

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;
}

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

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

Microsoft Edge 及びその前身である Internet Explorer — バージョン 9 から 11 — は、 CSS ルビの早期草稿を実装しており、 ruby-align プロパティが auto, left, center, right, distribute-letter, distribute-space, line-edge の値を持ちます。こちらの表では、 Microsoft の実装と現在の CSS Ruby, Level 1 仕様との正確な対応を説明します。

関連情報

• HTML のルビ関連要素: <ruby>, <rt>, <rp>, <rtc>
• CSS のルビ関連プロパティ: ruby-position, ruby-merge