ruby-position

Experimental

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;

Syntax

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 definition

Initial valueover
Applies toruby annotations containers
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

over | under | inter-character

Examples

Ruby positioned over the text

HTML

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

CSS

ruby {
    ruby-position:over;
}

Result

Ruby positioned under the text

HTML

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

CSS

ruby {
    ruby-position:under;
}

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

BCD tables only load in the browser

See also