display: ruby

Overview

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.

Browser support

Syntax

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

Live demo

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

Accessibility

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

Related links

• MDN Web Docs - display: ruby

Powered by web-features