Paragraphs & wrapping
text-box-edge
text-box-edge sets how far text-box-trim cuts into the text, such as to the top of capital letters or to the baseline, so the space above and below the text can match.
Syntax
auto | [ text | cap | ex | ideographic | ideographic-ink ]
[ text | alphabetic | ideographic | ideographic-ink ]?Preview
Code
.box {
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}Controls
About
Values
Write the top edge and then the bottom edge, separated by a space (cap alphabetic). The top edge can be:
text: the top of the font (ascent).cap: the top of capital letters (the height of H).ex: the top of the lowercase x.ideographic: the top of the ideographic em box (the full-width square around CJK characters).ideographic-ink: the top of the ideographic character face (where the ink actually goes).
The bottom edge can be:
text: the bottom of the font (descent).alphabetic: the baseline that Latin letters sit on.ideographicandideographic-ink: the bottom of the em box and of the character face, as for the top edge.
text, ideographic and ideographic-ink apply to both edges when written alone. cap, ex and alphabetic work on one side only, so they cannot be written alone.
The initial value auto is the same as text in current browsers (the spec makes it use line-fit-edge, which no browser supports yet).
Pair it with text-box-trim
text-box-edge only says where to cut, so nothing changes until text-box-trim says which side to trim. The preview on this page sets text-box-trim: trim-both as a helper declaration. The text-box shorthand sets both, as in text-box: trim-both cap alphabetic.
For Latin buttons and headings, cap alphabetic makes text look vertically centered when the top and bottom padding are equal. For text with mostly lowercase letters, ex alphabetic works too.
Browser support
Supported in Chrome and Edge 133, Safari 18.2 and Firefox 154 and later. Only Firefox supports ideographic and ideographic-ink so far.