demo · v151

Prose Comparator

The same paragraph rendered with ruby-overhang: auto, spaces, and the legacy none alias, side-by-side, for Japanese, Chinese pinyin, and Korean transliteration. Toggle a character-cell ruler to see exactly where the annotations overflow their base.

Requires a Chrome 151+ build. If your browser does not yet support the property, both panels render the same way (browser default).

language

compare

ruby-overhang: auto (default, 151+)

Annotations may extend past their base character under UA-defined rules to reduce gaps in running text.

ruby-overhang: spaces

Annotations may overhang only into adjacent space characters; this is the constrained compatibility behavior.

ruby-overhang: none (legacy alias)

none remains accepted for compatibility and maps to the same behavior as spaces.

code

.prose      { ruby-overhang: auto; }   /* default in Chrome 151 */
.prose-safe { ruby-overhang: spaces; } /* contain overhang to whitespace
                                          and fullwidth punctuation */
.legacy     { ruby-overhang: none; }   /* accepted as an alias of spaces */

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗