CSS Inline Layout 3 · text-box-trim
字面Ideographic Ink
text-box-trim shaves the invisible padding off a line of text.
Four of its edge keywords describe Latin letters. Two of them —
ideographic and ideographic-ink — ask a question
only a Japanese font can answer, out of a table no browser has ever
exposed to CSS.
No engine has shipped them — the live table at the end checks yours. So this page reads the metrics straight out of six font binaries and draws them for you, then does the trimming itself, which turns out to unlock things the real property can’t do.
解剖 Anatomy
One glyph, five edges
A Japanese character is designed inside a square: the 仮想ボディ
— the virtual body, exactly 1em on a side. The ink is not allowed to fill
it. It stops short, inside a smaller centred square called the
字面 (jizura, the character face), and the gap between the
two is what keeps dense text breathing.
Both squares are pinned by OpenType BASE baselines:
ideo sets the floor of the em box, icft and
icfb bracket the face. That is precisely what
ideographic and ideographic-ink point at.
Drag the size, swap the face, toggle the layers.
実験 Playground
Cut the box
text-box-trim picks which sides to cut;
text-box-edge picks where to cut to. Set them and watch the
leading disappear. Flip the engine to native to see what your browser
really does today — the two ideographic values will simply stop working, because
no engine has implemented them.
字面率 Face ratio
Every face fills its square differently
The em box is always 1em. The character face inside it is not — its share of
the square is the 字面率, and it is a real design decision.
Screen gothics push toward 90% so small text stays legible. A brush face
leaves a third of the square empty, because that emptiness is the
letterform. This is why ideographic-ink has to be a separate
keyword from ideographic: only the font knows.
縦組 Vertical
Turn the page ninety degrees
Fonts declare the character face twice — once along each axis of the
BASE table. Set text vertically and the edges that were over and
under become left and right, so the same two keywords now trim the
column. The face square is centred either way, which is why a
vertical line of Japanese has even gutters without anyone measuring anything.
遊 Play
What the metrics are good for
Once the character face is a number you hold, it stops being a typesetting detail and becomes an anchor to hang things off. Each of these knows exactly where the ink is designed to start and stop — and the last one does something the real CSS property, whose values are discrete, could never animate.
現状 Reality
What actually ships
| Value | Spec | This browser |
|---|
text-box-trim, text-box-edge and the
text-box shorthand shipped in Chrome 133 and
Safari 18.2. Firefox has not implemented them.
ideographic and ideographic-ink were explicitly
deferred out of that release. Two spec questions are still open: how an
engine should synthesize the ideographic over edge when a font has
no idtp baseline (none of the six here do), and which font in
the cascade should be asked when a line mixes scripts.
This page synthesizes the over edge as ideo + 1em —
the em box itself, which is the reading Japanese typesetting has always
used. Treat the ideographic rows as a preview, not a promise.
Of the four baselines involved, exactly one is reachable from script
today: TextMetrics.ideographicBaseline reports
ideo, and it correctly accounts for a font whose
romn is offset. icft and icfb — the
character face, the whole reason ideographic-ink exists — are
exposed by no API at all, so this page reads them out of the font binaries
at build time.