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 |
over
under
inter-character
over | under | inter-character
This HTML will render differently with each value of ruby-position
:
<ruby> <rb>超電磁砲</rb> <rp>(</rp><rt>レールガン</rt><rp>)</rp> </ruby>
<ruby> <rb>超電磁砲</rb> <rp>(</rp><rt>レールガン</rt><rp>)</rp> </ruby>
ruby { ruby-position:over; }
This gives the following result:
<ruby> <rb>超電磁砲</rb> <rp>(</rp><rt>レールガン</rt><rp>)</rp> </ruby>
ruby { ruby-position:under; }
This gives the following result:
Specification | Status | Comment |
---|---|---|
CSS Ruby Layout Module Level 1 The definition of 'ruby-position' in that specification. | Working Draft | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | No | 12 | 38 | No
|
? | No
|
inter-character
|
No | ? | No | No | ? | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | No | ? | Yes | 38 | No | No
|
No |
inter-character
|
No | ? | No | No | No | No | No |
<ruby>
, <rt>
, <rp>
, and <rtc>
.ruby-align
, ruby-merge
.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/ruby-position