v151 · CSS · typography

Locale & Script Matrix

Six annotation systems — Japanese furigana, Mandarin pinyin, Traditional Chinese bopomofo, Japanese vertical writing, Cantonese jyutping, and Korean pronunciation guides — rendered with ruby-overhang: auto, spaces, and the legacy none spelling that aliases to spaces.

Show value:
Live alias probe
ParserWaiting for browser check…
CSSOMWaiting for browser check…
Computed valuesWaiting for browser check…
Measured samplesWaiting for browser check…
前 薔ばらのはな 後 前 薔ばらのはな 後
Script / system auto spaces nonelegacy alias of spaces Notes
Japanese furigana
lang="ja", horizontal		 東ひがし、西にし、南みなみ、北きた 東ひがし、西にし、南みなみ、北きた 東ひがし、西にし、南みなみ、北きた Multi-kana furigana often wider than kanji base. none should match spaces, preserving overhang only into adjacent spaces.
Mandarin pinyin
lang="zh", horizontal		 中zhōng文wén美měi丽lì 中zhōng文wén美měi丽lì 中zhōng文wén美měi丽lì Pinyin syllables with tones often exceed single CJK width. Compare auto against the constrained spaces/none alias pair.
Bopomofo (zhuyin)
lang="zh-Hant"		 中ㄓㄨㄥ文ㄨㄣˊ美ㄇㄟˇ麗ㄌㄧˋ 中ㄓㄨㄥ文ㄨㄣˊ美ㄇㄟˇ麗ㄌㄧˋ 中ㄓㄨㄥ文ㄨㄣˊ美ㄇㄟˇ麗ㄌㄧˋ Zhuyin is typically inline-end in vertical writing. Horizontal overhang matters here for multi-character bases.
Korean pronunciation
lang="ko"		 韓한國국語어 韓한國국語어 韓한國국語어 Hangul ruby over Hanja. Typically 1:1 character width — less overhang pressure than Japanese multi-kana.
Japanese — long furigana
annotation wider than base		 薔ばら薇が咲さく季節きせつ 薔ばら薇が咲さく季節きせつ 薔ばら薇が咲さく季節きせつ 「ばら」over「薔」— annotation ≫ base. The none column is expected to collapse to the same constrained behavior as spaces.
Japanese — punctuation
CJK punctuation adjacent		 「花はなが咲さく」と彼かれは言いった。 「花はなが咲さく」と彼かれは言いった。 「花はなが咲さく」と彼かれは言いった。 Punctuation-adjacent ruby makes it easier to compare permissive auto overhang against the constrained spaces/none alias pair.

Vertical writing

In vertical writing mode (writing-mode: vertical-rl), overhang applies in the block direction. The same property controls whether ruby text overhangs into adjacent block-direction space.

auto
東ひがし京きょう都と
spaces
東ひがし京きょう都と
none alias
東ひがし京きょう都と
CSS property values
auto — browser applies its default typographic rules. Ruby may partially overhang adjacent boxes when the annotation is wider than its base.
spaces — ruby may not overlap adjacent boxes except over adjacent spaces.
none — legacy value alias of spaces. It is accepted for compatibility, but it is not a third layout behavior.

references

implementation reference

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