CSS ruby-position Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The ruby-position CSS property defines the position of a ruby element relative 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). Ruby text is typically used in East Asian languages to indicate pronunciation or to provide a short annotation. It is displayed above or below the base text, depending on the ruby-position property.

Initial value
before
Applies to
The parent of elements with display: ruby-text
Inherited
Yes
Computed value
Specified value
Animatable
No
JavaScript syntax
object.style.rubyPosition

Syntax

ruby-position: [ over | under | inter-character ] && [ right | left ]

Values

  • overThe ruby text appears over the base in horizontal text.
  • underThe ruby text appears under the base in horizontal text.
  • inter-characterThe ruby text appears on the right of the base in horizontal text.
  • rightThe ruby text appears on the right side of the base in vertical text.
  • leftThe ruby text appears on the left side of the base in vertical text.

Example

<ruby>
<rb>A</rb><rb>B</rb><rb>C</rb>
<rtc>Above</rtc>
<rtc>Below</rtc>
</ruby>
ruby {
  ruby-position: alternate; /* this is also the initial value */
}

Browser Support

The following table will show you the current browser support for the CSS ruby-position property.

Desktop
Edge Chrome Firefox Opera Safari
848438707
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
84386071484

Last updated by CSSPortal on: 31st December 2023