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;

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 value over
Applies to ruby annotations containers
Inherited yes
Computed value as specified
Animation type discrete

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 compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
ruby-position No 12 — 79 38 No
No
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).
No No
No
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).
inter-character No No No No No No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
ruby-position No No 38 No No
No
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).
No
inter-character No No No No No No

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/ruby-position