v151 · css · typography · cjk
CSS ruby-overhang property
The ruby-overhang CSS property controls whether ruby annotation text — the small glosses shown above or beside CJK characters — is allowed to visually extend over adjacent characters when there is not enough room for it above the base text.
at a glance
| Shipped in | Chrome 151 (desktop, Android, WebView; enabled by default) |
|---|---|
| Status | Enabled by default |
| Spec | CSS Ruby Layout Level 1 §ruby-overhang |
| Standards position (Firefox) | Mozilla standards-positions #1372 (no signal) |
| Standards position (Safari) | WebKit standards-positions #681 (support) |
| ChromeStatus | 6560118298771456 — CSS ruby-overhang property |
Implementation-status divergence, both sides reported rather than resolved (fetched 2026-10-07): this page records ruby-overhang enabled by default in Chrome 151 across desktop, Android, and WebView per its active ship stage 260 and blink-dev Intent to Ship, while the ChromeStatus API record top-level status field still reads “Proposed” (accurate_as_of 2026-06-29). Additionally, MDN BCD (ruby-overhang.json) lists keyword none as unsupported in Chrome (version_added: false), while ChromeStatus and CSSWG resolution (CSSWG issue #5912) record that none is accepted as an alias for spaces.
why it exists
Ruby annotations (furigana in Japanese, pinyin in Chinese, etc.) often need more horizontal space than the base character they annotate. When there is not enough room, existing browser behaviour varies: some browsers let the annotation overhang into adjacent whitespace or CJK characters (which is the typographically preferred behaviour in Japanese publishing), while others compress the annotation or force extra spacing. ruby-overhang gives authors explicit control over this trade-off.
Per the CSSWG resolution in CSSWG issue #5912, the keyword none is an alias for spaces: both restrict overhang to whitespace only — no overhang into adjacent non-whitespace text. The auto keyword lets the browser decide based on script conventions.
the property syntax
The formal syntax from the CSS Ruby Layout Level 1 specification:
ruby-overhang: auto | spaces | none| Property | ruby-overhang |
|---|---|
| Applies to | Ruby container boxes / ruby annotation containers |
| Inherited | Yes |
| Initial value | auto |
| Values |
auto — browser decides based on script conventions (default)spaces — annotation may overhang adjacent whitespace onlynone — alias for spaces (per CSSWG resolution)
|
examples
/* Default: browser decides overhang based on script */
ruby { ruby-overhang: auto; }
/* Restrict to whitespace only — tighter typesetting */
.tight-ruby { ruby-overhang: spaces; }
/* Explicitly no overhang into adjacent non-whitespace characters */
.no-overhang { ruby-overhang: none; }
browser support
| Browser | Support | Notes |
|---|---|---|
| Chrome 151+ | Enabled by default | Desktop, Android, WebView; tracked in Chromium issue 366873207 |
| Edge 151+ | Enabled by default | Chromium mirror |
| Safari | Shipped (18.2+) | Shipped auto and none in 18.2; spaces in Technology Preview per webstatus.dev |
| Firefox | No signal | Tracked in Mozilla standards-positions #1372 |
see also
- Chrome Platform Status — CSS ruby-overhang property
- ChromeStatus API record (6560118298771456)
- ChromeStatus milestone 151 features query
- CSS Ruby Layout Level 1 — ruby-overhang
- MDN Web Docs — ruby-overhang
- MDN Browser Compat Data — ruby-overhang.json
- webstatus.dev — ruby-overhang feature status
- WPT: css-ruby test results
- blink-dev Intent to Ship: CSS ruby-overhang property
- blink-dev Intent to Prototype: CSS ruby-overhang property
- Chromium Issue 366873207 — Implement CSS ruby-overhang
- CSSWG Issue 5912 — ruby-overhang none vs spaces
- CSSWG Issue 4492 — ruby-overhang behavior
- WebKit Standards Positions #681
- Mozilla Standards Positions #1372