Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today.
Experimental: Check browser support before using this in production.
The CSS text-box property is a shorthand for the text-box-trim and text-box-edge properties, allowing us to choose where and how much whitespace is trimmed from text in a single declaration.
.element {
text-box: trim-both cap alphabetic;
}The text-box property is defined in the CSS Inline Layout Module Level 3 specification.
Syntax
text-box: normal | <'text-box-trim'> || <'text-box-edge'>- Initial Value:
normal - Applies to: block containers, multi-column containers, and inline boxes
- Inherited: no
- Percentages: n/a
- Computed value: the specified keyword
- Canonical order: per grammar
- Animation type: discrete
Values
/* Initial */
text-box: normal;
text-box: none auto;
/* Trim Combinations */
text-box: trim-both cap alphabetic;
text-box: trim-end cap text;
text-box: trim-start ex alphabetic;
text-box: trim-both ex text;
text-box: trim-start text alphabetic;
text-box: trim-both text;
/* Global Values */
text-box: inherit;
text-box: initial;
text-box: revert;
text-box: revert-layer;
text-box: unset;The text-box-trim goes first and takes the following values:
none: No whitespace is trimmed.trim-start: Trims the half-leading above text.trim-end: Trims the half-leading under text.trim-both: Trims both the half-leading above and under text.
The text-box-edge goes last and takes two values for the leading over and under text:
text. Keeps the half-leading over and under the text baseline.cap. Trims over the text to capital letters height.ex. Trims over the text to lowercase x-letter height.alphabetic. Trims under the text to the bottom of most characters (“m”, “a” or “Δ”, but not “y” or “g”).
The normal initial value sets text-box-trim to none and text-box-edge to auto, so no whitespace is trimmed. This is different from auto, which sets text-box-trim to trim-both and text-box-edge to auto, which defaults to text value and consequently, whitespace is trimmed.
Remember that text-box-trim only trims the half-leading on the first and last line, not in between.
The problem with text leading
In typography, the spacing between lines of text is called leading in honor of the lead strips used to increase the line spacing in printed media. These lead strips were placed under each line of text, so when media went digital, leading was also added below each line.
However, CSS has background colors, borders, and other elements that would make text feel crammed if its only spacing was below each line, which is why CSS inserts space both above and under each line in what’s called half-leading.
Most of this explanation is informed by Matthias Ott’s awesome post on leading in CSS.
In theory, half-leading works great since it provides space between lines while also giving the whole text block room to breathe. In practice, however, there are a lot of cases where we want to manage the spacing between blocks of text ourselves, especially in titles where there aren’t as many text lines, but leading is still there. Similar to how letter-spacing is broken by design.
Half-leading is often forgotten when switching from design to development, so even after setting each padding, margin, and gap correctly, the final result may look off. We can compensate by adjusting an element’s padding and margin (even using negative values) accordingly, but this is more of a hack than a solution since we often don’t know each font’s leading and have to eyeball it.
Luckily, the text-box remove the burden of figuring out the leading from the developer to CSS. As Adam Argyle succinctly puts it:
The font knows, now CSS knows!
Basic usage
One of my biggest pet peeves in CSS is perfectly aligning a title and image tops, and failing miserably due to half-leading. Take, for example, this demo for another Almanac entry I worked on:
You can see clearly the space between the title and the image tops. Day ruined.
But now we can remove it with the text-box property. First, we set the text-box-trim part to the half-leading we want to trim. Then, using text-box-edge we can define how much whitespace we want to trim. In this case, we are only concerned about the half-leading over text up to the capital letter height, so we will set it to trim-start cap text.
Note that even if we don’t plan on trimming the half-leading under text, we have to set it on text-box-edge.
h1 {
text-box: trim-start cap text;
}Another common pet peeve with half-leading is centering text. Since the half-leading above text isn’t necessarily the same size as the half-leading under the text, centered text (especially titles) may not look centered at all. Take this example from the spec, where text doesn’t look centered even if its content box is:
To solve this, we want to trim both half-leadings, so we’ll be using trim-both. But now, we will remove most whitespace using cap alphabetic.
h1 {
text-box: trim-both cap alphabetic;
}
Demo
Specification
The text-box property is defined in the CSS Inline Layout Module Level 3 specification, which is in Editor’s Draft status at the time of writing. That means the information can change between now and when it formally becomes a Candidate Recommendation for implementation.
Browser support
More information
- CSS
text-box-trim(Adam Argyle) - The Thing With Leading in CSS (Matthias Ott)
