これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
概要
CSS の ruby-position プロパティは、ベース要素に対するルビ要素の位置を定義します。要素の上方 (over)、下方 (under)、文字の間の右側 (inter-character) に配置できます。
| 初期値 | over |
|---|---|
| 適用対象 | ruby annotations containers |
| 継承 | 継承する |
| メディア | visual |
| 計算値 | 指定値 |
| アニメーションの可否 | 不可 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
/* キーワード値 */ ruby-position: over; ruby-position: under; ruby-position: inter-character; /* グローバル値 */ ruby-position: inherit; ruby-position: initial; ruby-position: unset;
値
over
ルビをメインテキストの上 (横書きの場合) または右 (縦書きの場合) に配置することを示すキーワードです。under
ルビをメインテキストの下 (横書きの場合) または左 (縦書きの場合) に配置することを示すキーワードです。inter-character- ルビをそれぞれの文字の間に配置することを示すキーワードです。
形式文法
over | under | inter-character
例
この HTML を、ruby-position のそれぞれの値でレンダリングします:
<ruby> <rb>超電磁砲</rb> <rp>（</rp><rt>レールガン</rt><rp>）</rp> </ruby>
ルビをテキストの上に配置する
ruby {
ruby-position:over;
}
結果は以下のとおりです:
ルビをテキストの下に配置する
ruby {
ruby-position:under;
}
結果は以下のとおりです:
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Ruby Layout Module Level 1 ruby-position の定義 |
草案 | 最初期の定義 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本サポート | 未サポート | 38 (38) | 未サポート [1] | ? | 未サポート [2] |
inter-character |
未サポート | 未サポート | 未サポート | ? | 未サポート |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 未サポート | 38.0 (38) | 未サポート [1] | 未サポート | 未サポート [2] |
inter-character |
未サポート | 未サポート | 未サポート | 未サポート | 未サポート |
[1] Internet Explorer 9 より、inline (ルビで display: inline を指定したものと同等) および above (over と同義) が定義されている古い草案をサポートしています。
[2] WebKit は非標準の接頭辞付き ruby-position である -webkit-ruby-position を実装しています。これは before と after (それぞれ ltr および rtl 表記において over 値を ruby-align: start と組み合わせたものと等価) の 2 つの値があります。
関連情報
- HTML のルビ関連要素:
<ruby>,<rt>,<rp>,<rtc> - CSS のルビ関連プロパティ:
ruby-align,ruby-merge