これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
概要
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 が値 auto、left、center、right、distribute-letter、distribute-spaceｍline-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 |
等価な値はありません |
関連情報
- HTML のルビ関連要素:
<ruby>,<rt>,<rp>,<rtc> - CSS のルビ関連プロパティ:
ruby-position,ruby-merge