CSS - ruby-position

Examples

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

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

ruby {
    ruby-position:over;
}

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

ruby {
    ruby-position:under;
}

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

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 <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> under <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> 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).

Browser Compatibility  

[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  

• HTML Ruby elements: <ruby>, <rt>, <rp>, and <rtc>.
• CSS Ruby properties: ruby-align, ruby-merge.

Specifications  

License