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 Experimental

Is a keyword indicating that the ruby has to be placed between the different characters.

alternate Experimental

Is a keyword indicating that the ruby alternates between over and under, when there are multiple levels of annotation.

ruby-position = 
  [ alternate || [ over | under ] ]  |
  inter-character                    

HTML

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

CSS

ruby {
  ruby-position: over;
}

Result

HTML

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

CSS

ruby {
  ruby-position: under;
}

Result

HTML

<ruby>
  <rb>A</rb><rb>B</rb><rb>C</rb>
  <rtc>Above</rtc>
  <rtc>Below</rtc>
</ruby>

CSS

ruby {
  ruby-position: alternate; /* this is also the initial value */
}

Result

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