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 (Enabled by default)
Status	Enabled by default
Spec	CSS Ruby Layout Level 1 §ruby-overhang
Standards position (Firefox)	No signal
Standards position (Safari)	Shipped/Shipping
ChromeStatus	6560118298771456 — CSS ruby-overhang property

Source: chromestatus.com/feature/6560118298771456

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, 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.

Source: chromestatus feature summary; CSS Ruby spec §ruby-overhang

the property

Property	`ruby-overhang`
Applies to	Ruby container boxes
Inherited	Yes
Initial value	`auto`
Values	`auto` — browser decides based on script (default) `spaces` — annotation may overhang adjacent whitespace only `none` — alias for `spaces` (per CSSWG)

Source: CSS Ruby Layout Level 1 §ruby-overhang

example

/* 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 characters */
.no-overhang { ruby-overhang: none; }

東とう京きょう

ruby-overhang: auto

東とう京きょう

ruby-overhang: spaces

Source: CSS Ruby Layout Level 1

browser support