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
).
ruby-position
Try it
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: revert-layer; ruby-position: unset;
Values
-
over
-
Is 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
-
Is 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 annotation.
Formal definition
Initial value | alternate |
---|---|
Applies to | ruby annotations containers |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Formal syntax
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
Specification |
---|
CSS Ruby Annotation Layout Module Level 1 # rubypos |
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 ).
|
7
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 ).
|
7
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
See
bug 1191394.
|
No
|
88
|
No
|
No
|
No
|
No
|
No
|
88
|
No
|
No
|
No
|
inter-character |
No
See
bug 1258284.
|
No
|
No
See
bug 1055672.
|
No
|
No
|
No
|
No
|
No
|
No
|
No
|
No
|
No
|
See also
- HTML Ruby elements:
<ruby>
,<rt>
,<rp>
, and<rtc>
. - CSS Ruby properties:
ruby-align
,ruby-merge
.
© 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