Newly available Useful when ruby-position affects readability, line flow, or typographic consistency. Treat it as a content-facing choice, not just decoration.

ruby-position

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).

Typography

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
ruby-position
84
84
38
18.2
84
18.2
inter-character
84
84
18.2
84
18.2
over
84
84
38
18.2
84
18.2
under
84
84
38
18.2
84
18.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
  • Implemented as 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`).
Notes 3 item(s)
Removed
  • This feature was removed in a later browser version (79)
Compatibility
  • Available with a vendor prefix: -webkit- (79)
  • Implemented as 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`).
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (7)
  • Implemented as 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`).
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
  • Implemented as 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`).
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (7)
  • Implemented as 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`).
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Compatibility
  • This value is only supported with the prefixed version of the property.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Compatibility
  • This value is only supported with the prefixed version of the property.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Compatibility
  • This value is only supported with the prefixed version of the property.

Syntax

CSS 
ruby {
  ruby-position: over;
}
.bottom-ruby {
  ruby-position: under;
}

Live demo

Over(top)

CSS Over(top) demo.

PreviewFullscreen

Under(bottom)

CSS Under(bottom) demo.

PreviewFullscreen

verticalcomparison

CSS verticalcomparison demo.

PreviewFullscreen

Use cases

  • Reading rhythm

    Use ruby-position to improve how text wraps, aligns, or scales in dense layouts and editorial UI.

  • Language-aware text

    Adjust typography when script direction, spacing, or writing rules differ across languages.

Cautions

  • Test with real content rather than short placeholder strings because typographic behavior changes with length and language.
  • Prefer the smallest rule that solves the layout problem so text remains easy to maintain.

Accessibility

  • Typography choices should preserve readability at high zoom and on narrow screens.
  • Avoid stylistic settings that reduce comprehension or make scanning harder.

Related links