CSS Reference

ruby-position

ルビ注釈の位置を指定する

ruby-position プロパティは、ベーステキストに対するルビ注釈の位置を指定します。

ruby-position プロパティに指定可能な値は下記の通りです。

inter-character 値は単体での指定のみ可能。alternate 値は単体、もしくは over、under のどちらかと組み合わせて（空白で区切って）指定することができます。

alternate 異なるレベルのルビ注釈がある場合、over と under が交互に配置されます。
ルビコンテナがそのルビセグメントにおいて最初に使われる場合や、それまでのルビ注釈が inter-character であれば、alternate は over として配置されます。それ以外の場合、それまでのルビ注釈が over であれば alternate は under として、逆に under であれば over としてに配置されます。
over ルビ注釈がベーステキストの上側（水平書字モード（横書き）ではベーステキストの上、垂直書字モード（縦書き）ではベーステキストの右側）に配置されます。
under ルビ注釈がベーステキストの下側（水平書字モード（横書き）ではベーステキストの下、垂直書字モード（縦書き）ではベーステキストの左側）に配置されます。
inter-character ルビコンテナの書字モードが垂直である場合は over と同じです。水平書字モードの場合、ルビ注釈は文字の間（各文字の右側）に配置されます。

ruby-positionの仕様

初期値
  • alternate
対象となる要素
  • ルビ注釈コンテナ
継承
  • あり

ruby-positionのサンプルソース

ruby {
  ruby-position: over;
}
ruby {
  ruby-position: alternate over;
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○-webkit-
iOS Safari ○-webkit-
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome