v151 · CSS · Typography

Reading Passage

A paragraph of furigana-annotated Japanese prose — the typical use case for ruby-overhang. Switch between auto, spaces, and the legacy none alias to see how annotation overhang changes around adjacent whitespace. The zoomed comparison shows the effect clearly on three adjacent characters.

ruby-overhang: accessibility:

reading passage — ruby-overhang: auto

日本語にほんごの文章ぶんしょうに振ふり仮名がなを付つけると、読よみやすくなります。特とくに子供こどもや日本語にほんごの学習者がくしゅうしゃにとって、漢字かんじの読よみ方かたを示しめすことは重要じゅうようです。

auto

漢かん字読よ

spaces

漢かん字読よ

none

漢かん字読よ

values explained

auto (default) — the browser applies established typographic practice and may overhang where the UA determines it is safe.
spaces — ruby may overhang into adjacent whitespace characters such as U+0020 and ideographic space.
none — legacy spelling retained for compatibility; current CSS Ruby treats it as an alias of spaces.

code

/* Default: allow UA-selected overhang */
ruby { ruby-overhang: auto; }

/* Constrain overhang to adjacent spaces */
ruby { ruby-overhang: spaces; }

/* Legacy alias of spaces */
ruby { ruby-overhang: none; }

/* Typical prose setup */
.japanese-body {
  ruby-overhang: auto;
  line-height: 2.4; /* extra space for ruby annotations */
}
.japanese-body ruby rt {
  font-size: 0.5em;
  color: var(--text-muted);
}

.japanese-body.low-vision ruby rt {
  font-size: 0.72em;
  color: var(--text-black);
  font-weight: 700;
}

implementation reference

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

values explained

code

see also

implementation reference