<pre class="brush: css notranslate"><code><span class="token comment">/ Keyword values /</span> <span class="token property">ruby-position</span><span class="token punctuation">:</span> over<span class="token punctuation">;</span> <span class="token property">ruby-position</span><span class="token punctuation">:</span> under<span class="token punctuation">;</span> <span class="token property">ruby-position</span><span class="token punctuation">:</span> inter-character<span class="token punctuation">;</span> <span class="token property">ruby-position</span><span class="token punctuation">:</span> alternate<span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">ruby-position</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">ruby-position</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">ruby-position</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">ruby-position</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>

ruby-position

The ruby-position CSS property defines the position of a ruby element relatives to its base element. It can be positioned over the element (over), under it (under), or between the characters on their right side (inter-character).

Syntax

/* Keyword values */ ruby-position: over; ruby-position: under; ruby-position: inter-character; ruby-position: alternate;  /* Global values */ ruby-position: inherit; ruby-position: initial; ruby-position: revert; ruby-position: unset; 

Values

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.

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.

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

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

Formal definition

Formal syntax

[ alternate || [ over | under ] ] | inter-character

Examples

Ruby positioned over the text

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

ruby {     ruby-position:over; } 

Ruby positioned under the text

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

ruby {     ruby-position:under; } 

Ruby alternate

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

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

Specifications

See also