demo · v151

Vertical Writing & Punctuation Overhang

The CSSWG issue that motivated the resolution (#5912) argued that fully forbidding overhang was too aggressive. This page shows the vertical writing case and the current result: none is accepted as a legacy alias of spaces.

CSSWG #5912 motivation: “no author would consciously chose the currently specified none.” The shipped shape keeps none as a compatibility spelling while using the constrained spaces behavior.

vertical stage

ruby-overhang:
春はるの京都きょうとを歩あるくと、桜さくらの花はなが満開まんかいで、春風はるかぜが心地ここちよい。

Vertical-rl matches the layout used in books, manga, and traditional Japanese newsprint. Furigana sits to the right of the base text — overhang lets long readings sneak into the leading after punctuation instead of bowing the line.

punctuation side-by-side

Same horizontal sentence, three modes. Compare auto against spaces; the none column should match spaces, because it is aliased to spaces per CSSWG resolution.

auto 新幹線しんかんせん、東京とうきょうへ。
spaces 新幹線しんかんせん、東京とうきょうへ。
none (aliased to spaces) 新幹線しんかんせん、東京とうきょうへ。
auto: implementation may overhang where the UA determines it is typographically safe. spaces: overhang only over adjacent space characters. none: per CSSWG resolution in #5912, treated the same as spaces.

code

/* Long-form Japanese page */
article {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* Body text: constrain overhang to adjacent spaces */
article ruby { ruby-overhang: spaces; }

/* Legacy spelling, equivalent to spaces */
h1 ruby, h2 ruby { ruby-overhang: none; }

see also

implementation reference

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