Web/CSS/ruby-position

This is an experimental technologyCheck 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

[[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2015/03/04/10251/0aec937b9d9394d8726ed5f61901a414/Screen%20Shot%202015-03-04%20at%2013.02.20.png|Over example]]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

[[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2015/03/04/10249/eac8d993477bded6da6e83783f906c53/Screen%20Shot%202015-03-04%20at%2013.02.07.png|Under example]]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 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;
}

Ruby positioned under the text

HTML

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

CSS

ruby {
    ruby-position:under;
}

Specifications

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

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

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

Legend

Full support  

Full support

No support  

No support

Experimental. Expect behavior to change in the future.'

Experimental. Expect behavior to change in the future.

See implementation notes.'

See implementation notes.

See also

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

ruby-position by Mozilla Contributors is licensed under CC-BY-SA 2.5.