CSS - ruby-position

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).

Examples

Example1

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>
  <rb>超電磁砲</rb>
  <rp>(</rp><rt>レールガン</rt><rp>)</rp>
</ruby>
ruby {
    ruby-position:over;
}

This gives the following result:

Ruby positioned under the text

<ruby>
  <rb>超電磁砲</rb>
  <rp>(</rp><rt>レールガン</rt><rp>)</rp>
</ruby>
ruby {
    ruby-position:under;
}

This gives the following result:

Syntax  

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

/* Global values */
ruby-position: inherit;
ruby-position: initial;
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.

Formal syntax

over | under | inter-character

Description  

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).

Initial valueover
Applies toruby annotations containers
Inheritedyes
Mediavisual
Computed valueas specified
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support Not supported  38 (38) Not supported [1] ?  Not supported [2]
inter-character Not supported  Not supported Not supported  ?  Not supported 
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support Not supported  38.0 (38) Not supported [1] Not supported  Not supported [2]
inter-character Not supported  Not supported Not supported  Not supported  Not supported 

[1] Internet Explorer, since IE 9, supports a very old draft version, which defined inline (equivalent of having display: inline on the ruby), and above (synonym of the modern over)

[2] WebKit 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  

Specifications  

Specification Status Comment
CSS Ruby Layout Module Level 1
The definition of 'ruby-position' in that specification.
Working Draft Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/ruby-position