ruby-position

The ruby-position CSS property defines the position of a ruby element relatives to its base element. It can be positioned over the element (over), under it (under), or between the characters on their right side (inter-character).

Syntax

/* Keyword values */
ruby-position: over;
ruby-position: under;
ruby-position: inter-character;
ruby-position: alternate;

/* Global values */
ruby-position: inherit;
ruby-position: initial;
ruby-position: revert;
ruby-position: unset;

Values

over

Over exampleIs a keyword indicating that the ruby has to be placed over the main text for horizontal scripts and right to it for vertical scripts.

under

Under exampleIs a keyword indicating that the ruby has to be placed under the main text for horizontal scripts and left to it for vertical scripts.

inter-character

Is a keyword indicating that the ruby has to be placed between the different characters.

alternate

Is a keyword indicating that the ruby alternates between over and under, when there are multiple levels of annotaion.

Formal definition

Initial value alternate
Applies to ruby annotations containers
Inherited yes
Computed value as specified
Animation type discrete

Formal syntax

[ alternate || [ over | under ] ] | inter-character

Examples

Ruby positioned over the text

HTML

<ruby>
  <rb>超電磁砲</rb>
  <rp></rp><rt>レールガン</rt><rp></rp>
</ruby>

CSS

ruby {
    ruby-position:over;
}

Result

Ruby positioned under the text

HTML

<ruby>
  <rb>超電磁砲</rb>
  <rp></rp><rt>レールガン</rt><rp></rp>
</ruby>

CSS

ruby {
    ruby-position:under;
}

Result

Ruby alternate

HTML

<ruby>
  <rb>A<rb>B<rb>C</rb>
  <rtc>Above</rtc>
  <rtc>Below</rtc>
</ruby>

CSS

ruby {
    ruby-position: alternate; /* this is also the initial value */
}

Result

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
ruby-position
84
1
Implemented as a non-standard, prefixed, version of ruby-position, -webkit-ruby-position: it has two properties: before and after (both equivalent, for ltr and rtl scripts to the standard over value used with ruby-align: start).
84
79
Implemented as a non-standard, prefixed, version of ruby-position, -webkit-ruby-position: it has two properties: before and after (both equivalent, for ltr and rtl scripts to the standard over value used with ruby-align: start).
12-79
38
No
Internet Explorer 9 and later support an old draft values: inline (equivalent of having display: inline on the ruby), and above (synonym of the modern over).
70
15
Implemented as a non-standard, prefixed, version of ruby-position, -webkit-ruby-position: it has two properties: before and after (both equivalent, for ltr and rtl scripts to the standard over value used with ruby-align: start).
6.1
Implemented as a non-standard, prefixed, version of ruby-position, -webkit-ruby-position: it has two properties: before and after (both equivalent, for ltr and rtl scripts to the standard over value used with ruby-align: start).
84
1
Implemented as a non-standard, prefixed, version of ruby-position, -webkit-ruby-position: it has two properties: before and after (both equivalent, for ltr and rtl scripts to the standard over value used with ruby-align: start).
84
18
Implemented as a non-standard, prefixed, version of ruby-position, -webkit-ruby-position: it has two properties: before and after (both equivalent, for ltr and rtl scripts to the standard over value used with ruby-align: start).
38
60
14
Implemented as a non-standard, prefixed, version of ruby-position, -webkit-ruby-position: it has two properties: before and after (both equivalent, for ltr and rtl scripts to the standard over value used with ruby-align: start).
6.1
Implemented as a non-standard, prefixed, version of ruby-position, -webkit-ruby-position: it has two properties: before and after (both equivalent, for ltr and rtl scripts to the standard over value used with ruby-align: start).
14.0
alternate
No
No
88
No
No
No
No
No
88
No
No
No
inter-character
No
No
No
No
No
No
No
No
No
No
No
No

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/ruby-position