CSS ruby-overhang property

concepts

1. Ruby Overhang Toggle

   A line of furigana-annotated Japanese text. Toggle between auto, spaces, and none and see the overhang behaviour change in place.

2. Vertical Writing & Punctuation Overhang

   The CSSWG issue (#5912) that motivated aliasing none to spaces. A vertical-rl Japanese passage plus a side-by-side punctuation strip showing why purists wanted overhang over CJK punctuation kept on by default.

3. Reading Passage

   A full paragraph of furigana-annotated Japanese prose. Toggle between auto, spaces, and the legacy none alias while low-vision mode increases annotation size and contrast.

4. Prose Comparator

   Same paragraph rendered side-by-side with auto, spaces, and the legacy none alias for Japanese furigana, Chinese pinyin, and Korean transliteration. Overlay a character-cell ruler to see exactly where annotations spill past their base.

5. Furigana Density Stress

   Crank the density and rt length to force the annotation past the base. Compare auto with the constrained alias path while real-time line, height, and rendered rt/rb width metrics show the layout cost.

6. Locale & Script Matrix

   Six annotation systems — Japanese furigana, Mandarin pinyin, Traditional Chinese bopomofo, Japanese vertical writing, long-annotation stress, and CJK punctuation — rendered with auto, spaces, and none simultaneously. Toggle to a single value to compare across scripts.

7. Content Authoring Tool

   Build your own ruby-annotated text by adding base + annotation pairs. Load presets (Japanese furigana, Mandarin pinyin, Korean, Bopomofo), toggle ruby-overhang live, switch between horizontal and vertical writing mode, and copy the generated HTML + CSS.

8. Accessibility & i18n Audit

   Paste HTML containing <ruby> elements. Flags: missing <rp> fallback brackets, empty <rt> annotations, missing lang attributes, and disproportionately long annotations. Calculates the annotation-to-base ratio and suggests the appropriate ruby-overhang value. Five example forms included.

why it shipped

Ruby annotations (furigana in Japanese, bopomofo in Mandarin, and so on) often have wider text on top than the base text they annotate. Without overhang, the line gets pushed apart with whitespace to accommodate the annotation, breaking the visual rhythm. With overhang, the annotation can extend past the base text into adjacent whitespace or CJK punctuation that has natural breathing room. The property gives authors explicit control over a typographic detail Chrome has been guessing at.

references

• ChromeStatus entry
• CSS Ruby spec