demo · v151

Furigana Density Stress

Watch what happens to a paragraph when you crank the furigana density and force the rt width past the base character. Compare permissive auto with the constrained none/spaces alias path while line count, stage height, and rendered rt/rb width all update live.

Educational tool. Real text uses fixed pairs of base + rt; this page generates synthetic ruby of variable length so you can stress-test the layout. Inspect the stage with Chrome 151's DevTools to see the actual layout boxes.

controls

60%
3 chars
20px
360px

stage

running prose

measured lines
—
stage height (px)
—
ruby blocks
—
avg rt/rb width
—

code

/* Dense furigana benefits most from overhang.
   When the rt is wider than the base, spaces/none
   constrains overhang to adjacent spaces. */
article {
  ruby-overhang: auto;   /* compact, idiomatic flow */
}
.fixed-grid article {
  ruby-overhang: spaces; /* constrained compatibility path,
                            equivalent to legacy none */
}

see also

implementation reference

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