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

ruby-position

The ruby-position CSS property sets the position of a ruby annotation in relation to its base text. Annotations can display over, under, or interleaved with the base text.

Typography

Overview

The ruby-position CSS property sets the position of a ruby annotation in relation to its base text. Annotations can display over, under, or interleaved with the base text.

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

Powered by web-features