W3cubDocs

/CSS

ruby-position

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

Syntax

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 | under | inter-character

Examples

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:

Specifications

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

Browser compatibility

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	No	Yes	38	No¹	?	No²
`inter-character`	No	?	No	No	?	No

Feature	Android webview	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
Basic support	No	?	Yes	38	No	No	No²
`inter-character`	No	?	No	No	No	No	No

1. Internet Explorer 9 and later support an old draft values: inline (equivalent of having display: inline on the ruby), and above (synonym of the modern over).

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

ruby-position

Syntax

Values

Formal syntax

Examples

Ruby positioned over the text

Ruby positioned under the text

Specifications

Browser compatibility

See also