demo · v133
Edge keyword matrix
text-box-edge takes two keywords — over-edge and under-edge. Different combinations cap / ex / alphabetic / text snap to different optical references. Pick a pair and see the rendered box collapse to the chosen edges.
text-box-trim isn't supported here. Chrome 133+ required.Headline
shorthand
text-box: trim-both text text
tip: cap alphabetic is the optical pair print designers reach for.
what the keywords mean
- text — the font's full em box (today's default).
- cap — the cap height of upper-case letters.
- ex — the x-height of lower-case letters.
- alphabetic — the Latin baseline (under-edge only).
- ideographic / ideographic-ink — the CJK em or visible ink baseline.
The crucial property is text-box-edge's ability to take different keywords for over and under, so a heading can be trimmed to cap-height up top but kept on the alphabetic baseline at the bottom — the optical look of a print headline.