これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

概要

CSS の ruby-align プロパティは、ベースに対するさまざまなルビの配分を定義します。

初期値space-around
適用対象ruby bases, ruby annotations, ruby base containers, ruby annotation containers
継承継承する
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* キーワード値 */
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 {
  ruby-align:start;
}

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

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

ruby {
  ruby-align:center;
}

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

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

ruby {
  ruby-align:space-between;
}

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

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

ruby {
  ruby-align:space-around;
}

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

仕様

仕様書 策定状況 コメント
CSS Ruby Layout Module Level 1
ruby-align の定義
草案 最初期の定義

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 未サポート 38 (38) 未サポート[1] 未サポート 未サポート
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 未サポート 38.0 (38) 未サポート[1] 未サポート 未サポート

[1] Internet Explorer 9 より、ruby-align が値 autoleftcenterrightdistribute-letterdistribute-spaceline-edge を持つ、CSS Ruby の早期ドラフトを実装しています。こちらが簡単な比較表です:

IE の構文 標準仕様の構文
auto ruby-align を使用しない
left start を使用する (ltr 表記の場合)
center center
right start を使用する (rtl 表記の場合)
distribute-letter 等価な値はなく、space-between または space-around を使用する
distribute-space space-around
line-edge 等価な値はありません

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss
 最終更新者: yyss,