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

ruby-position

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

概要

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
Over exampleルビをメインテキストの上 (横書きの場合) または右 (縦書きの場合) に配置することを示すキーワードです。
under
Under exampleルビをメインテキストの下 (横書きの場合) または左 (縦書きの場合) に配置することを示すキーワードです。
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 を実装しています。これは beforeafter (それぞれ ltr および rtl 表記において over 値を ruby-align: start と組み合わせたものと等価) の 2 つの値があります。

関連情報

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

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