MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

ruby-align

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

概要

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

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

構文

/* キーワード値 */
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 の定義
草案 最初期の定義

ブラウザ実装状況

機能 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,