This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The ruby-position
CSS property defines the position of a ruby element relatives to its base element. It can be position over the element (over
), under it (under
), or between the characters, on their right side (inter-character
).
/* Keyword values */ ruby-position: over; ruby-position: under; ruby-position: inter-character; /* Global values */ ruby-position: inherit; ruby-position: initial; ruby-position: unset;
Initial value | over |
---|---|
Applies to | ruby annotations containers |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
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.
Formal syntax
over | under | inter-character
Examples
This HTML will render differently with each value of ruby-position
:
<ruby> <rb>超電磁砲</rb> <rp>(</rp><rt>レールガン</rt><rp>)</rp> </ruby>
Ruby positioned over the text
ruby { ruby-position:over; }
This gives the following result:
Ruby positioned under the text
ruby { ruby-position:under; }
This gives the following result:
Specifications
Specification | Status | Comment |
---|---|---|
CSS Ruby Layout Module Level 1 The definition of 'ruby-position' in that specification. |
Working Draft | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | No | Yes | 38 | No1 | ? | No2 |
inter-character | No | ? | No | No | ? | No |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | No | ? | Yes | 38 | No | No | No2 |
inter-character | No | ? | No | No | No | No | No |
1. 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
).
2. Safari implements 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
).
See also
- HTML Ruby elements:
<ruby>
,<rt>
,<rp>
, and<rtc>
. - CSS Ruby properties:
ruby-align
,ruby-merge
.