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 text-box-edge
property let us trim the whitespace around text content. It’s used alongside the text-box-trim
property to pick whether to remove whitespace above and/or below text.
.element {
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
text-box-edge
and text-box-trim
can be declared together using the text-box
shorthand property.
The text-box-edge
property is defined in the CSS Inline Layout Module Level 3 specification
Syntax
text-box-edge: auto | [cap | ex | text] [alphabetic | text];
- Initial Value:
auto
- Applies to: block containers and inline boxes
- Inherited: yes
- Percentages: n/a
- Computed value: the specified keyword
- Canonical order: per grammar
- Animation type: discrete
Values
/* Initial */
text-box-edge: auto;
/* Trim Combinations */
text-box-edge: cap alphabetic;
text-box-edge: cap text;
text-box-edge: ex alphabetic;
text-box-edge: ex text;
text-box-edge: text alphabetic;
text-box-edge: text;
/* Global Values */
text-box-edge: inherit;
text-box-edge: initial;
text-box-edge: revert;
text-box-edge: revert-layer;
text-box-edge: unset;
text
. Keeps the half-leading over and under the text baseline.cap
. Trims over the text to the capital letter 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”).
Remember that text-box-trim
only trims the half-leading on the first and last line, but not in between.
What’s leading?
In the past, there wasn’t a bulletproof way to remove spacing between lines (called leading) without setting negative margins or padding with magic numbers, but using text-box-trim
and text-box-edge
, we can pick whether to trim the half-leading over or under the text, and how much of that whitespace should be trimmed. For a more complete explanation on leading, you can check out the text-box
entry or Matthias Ott’s post on leading.
For a more complete explanation on leading, you can check out the text-box
entry or Matthias Ott’s post on leading.
Basic usage
There are two issues regarding half-leading and layouts:
- It offsets elements unevenly when their tops or bottoms are supposed to be aligned. In the image below, you can see that the text’s top isn’t completely aligned with the image.
- It misaligns centered texts when they are vertically aligned. This can be seen in the spec’s example, where the text isn’t centered even if its content box is:
In both cases, we will want to trim text to a certain degree. In the first one, we only care about the half-leading over text, so we’ll trim it up to capital letter height using the cap
value. In the second, we also care about the half-leading under text, which we’ll trim up to the beginning of most letters using alphabetic
.
.element {
text-box-trim: trim-both; /* Remember text-box-trim! */
text-box-edge: cap alphabetic;
}
I hate both cases, and you probably do too, which is why cap alphabetic
will probably be the most used value for text-box-edge
, as suggested by Adam Argyle.
We can go a step further and trim the text to the x-height (i.e., the height of lowercase “x”), using the ex alphabetic
or ex text
value. I can see ex
being more useful than cap
when working with lowercase letters only, in which case, cap
would still leave whitespace.
.element {
text-box-trim: trim-both;
text-box-edge: ex alphabetic;
}
CJK characters
All the examples we saw used letters from the Latin alphabet, so you may ask how text-box-edge
behaves with Chinese, Japanese, and Korean (CJK) characters? Turns out, there is no difference. The current implementation doesn’t take into consideration CJK, and it seems they still follow the Latin alphabet’s whitespace.
Right now, the spec defines the ideographic
and ideographic-ink
for CJK characters, but their exact behavior is still being debated, and they don’t have any browser support at the time of writing.
Demo
Specification
The text-box-edge
property is defined in the CSS Inline Layout Module Level 3 specification, which is currently in Editor’s Draft.
Browser support
More information
- CSS
text-box-trim
(Adam Argyle) - The Thing With Leading in CSS (Matthias Ott)