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

ruby-overhang

The ruby-overhang CSS property specifies whether or not a <ruby> annotation overhangs any surrounding text.

Typography

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
ruby-overhang
18.2
18.2
auto
18.2
18.2
none
18.2
18.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
ruby {
  ruby-overhang: auto;
}
.strict-ruby {
  ruby-overhang: none;
}

Live demo

Auto(is onlyoutallowallow)

CSS Auto(is onlyoutallowallow) demo.

PreviewFullscreen

None(is onlyout)

CSS None(is onlyout) demo.

PreviewFullscreen

longruby

CSS longruby demo.

PreviewFullscreen

Use cases

  • Refine text rhythm

    Use ruby-overhang to make long-form reading or dense interface copy easier to scan and understand.

  • Support language nuances

    Apply ruby-overhang when different writing systems or typographic conventions need more deliberate control.

Cautions

  • Test ruby-overhang 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

  • Check readability with zoom, narrow screens, and mixed-language content so text remains understandable.

Related links