Limited support Use with care and confirm browser support before shipping it to all users.

display: ruby

The display: ruby CSS declaration renders an element with the box layout of a <ruby> HTML element. Child elements may use equivalents to <ruby> internal elements such as display: ruby-base for <rb>. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.

Syntax and cascadeTypographyLayout

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.display.ruby
121
12
38
121
CSS property
ruby-base
12
38
ruby-base-container
12
38
ruby-text
121
12
38
121
ruby-text-container
12
38
alternate
Experimental
88
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (79)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (79)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (79)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (79)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (79)

Syntax

CSS 
.ruby { display: ruby; }
.ruby-base { display: ruby-base; }
.ruby-text { display: ruby-text; }
.ruby-base-container {
  display: ruby-base-container;
}

Live demo

rubydisplay

CSS rubydisplay demo.

PreviewFullscreen

Multipleruby

CSS Multipleruby demo.

PreviewFullscreen

HTML Rubyelement

CSS HTML rubyelement demo.

PreviewFullscreen

Use cases

  • Use display: ruby

    Use display: ruby when the default CSS behavior is not expressive enough for the component or layout you are building.

  • Handle edge cases

    Apply display: ruby to solve a specific styling constraint without introducing broader layout or behavior changes.

Cautions

  • Test display: ruby in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
  • Plan a fallback or acceptable degradation path when support is still limited.

Accessibility

  • Confirm that using display: ruby does not make content harder to perceive, understand, or operate in assistive contexts.

Related links