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!

☕ Buy a Coffee

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

HTML

<ruby>

  <rb>A</rb><rb>B</rb><rb>C</rb>

  <rtc>Above</rtc>

  <rtc>Below</rtc>

</ruby>

CSS

ruby {
  ruby-position: alternate; /* this is also the initial value */
}

Result

Editor

Browser Support

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

Desktop

84	84	38	70	7

Tablets / Mobile

84	38	60	7	14	84

Last updated by CSSPortal on: 31st December 2023

Support Us