The text-box-trim And text-box-edge Properties in CSS allow developers to trim definable amounts of white space that appears above the first line of formatted text and below the last line of formatted text in a text box, making the text box vertically larger than the content within it.

This space is called leadingand it appears above and below all lines of text (so it’s actually two half lines) to improve the readability of the text. However, we just want it to appear in between Lines of text, right? We don’t want it to appear on the top or bottom edges of our text boxes because then it will affect our margins, padding, gaps and other spacing.

For example, if we implement a 50px Margin, but then the leader adds another 37pxIn the end we would have a total of 87px of the room. Then we would have to adjust the margin 13px to create the space 50px in practice.

As a design systems expert, I try to maintain as much consistency as possible and use very little markup where possible so that’s what I can use Neighbor-sibling combiner (+) to create blanket rules like this:

/* Whenever  is followed by 
 */
 + h1 {
  margin-bottom: 13px; /* instead of margin-bottom: 50px; */
}

This approach is still a headache because you still have to do the math (albeit less). But with that text-box-trim And text-box-edge Characteristics, 50px as defined by CSS means 50px visually:

Disclaimer: text-box-trim And text-box-edge are only accessible via a feature flag in Chrome 128+ and Safari 16.4+, and via Safari Technology Preview without a feature flag. See Caniuse for the latest browser support.

Start with text-box-trim

text-box-trim is the CSS property that basically enables text box trimming. Beyond that, it has no real use, but it offers us the possibility of trimming only at the beginning, only at the end, both at the beginning and at the end, or none:

text-box-trim: trim-start;
text-box-trim: trim-end;
text-box-trim: trim-both;
text-box-trim: none;

Note: In older web browsers you may need to use the older one start/end/both values ​​instead of the newer ones trim-start/trim-end/trim-both Values ​​or In even older web browsers you may need to use top/bottom/both. Unfortunately there is no reference for this, so you’ll just have to see what works.

Now where do you want to trim from?

You’re probably wondering what I mean by that. Remember that a typographic letter has multiple peaks.

There is the x-height, which marks the top of the letter “x” and other lowercase letters (excluded). Rising star or Excesses), the cap height, which marks the beginning of capital letters (again, without ascenders or excess lengths), and the alphabetic baseline, which marks this below of most letters (without Abseiling devices or overshoot). Then of course there is the ascender and descender height.

You can adjust the white space between the if text-underline-position is set under).

Don’t cut anything

text-box-edge: leading means including all leaders; Just don’t cut anything. This has the same effect as text-box-trim: none or forego it text-box-trim And text-box-edge complete. You can also limit trimming below the edge with “text-box-trim: trim-start” or with trimming above the edge text-box-trim: trim-end. Yes, there are some ways to not do this at all!

Newer web browsers have deviated from the working drafts of the CSSWG specification by removing the leading Value and replace with autodespite the warning “Do not ship yet” (*shrug*).

Naturally, text-box-edge accepts two values ​​(a top edge statement, then a bottom edge statement). However, auto must be used alone.

text-box-edge: auto; /* Works */
text-box-edge: ex auto; /* Doesn't work */
text-box-edge: auto alphabetic; /* Doesn't work */

I could explain all the scenarios in which Auto would work, but none of them are useful. I think anything we want auto is to be able to set the top or bottom edge to auto and the other edge to something else, but that’s the only thing that doesn’t work. That’s a problem, but we’ll deal with it in a moment.

Trim above the ascenders and/or below the descenders

The text The value is truncated above the ascenders when used as the first value and below the descenders when used as the second value, and is also the default value if you do not declare the second value. (I think you would want it that way autobut that won’t be.)

text-box-edge: ex text; /* Valid */
text-box-edge: ex; /* Computed as `text-box-edge: ex text;` */
text-box-edge: text alphabetic; /* Valid */
text-box-edge: text text; /* Valid */
text-box-edge: text; /* Computed as `text-box-edge: text text;` */

It’s worth noting that the ascender and descender height metrics come from the fonts themselves (or not!), so the text can be quite tricky. For example, in the Arial font, the ascender height contains diacritical marks and the descender height also contains descenders, while in the Fraunces font, the descender height contains diacritics and I don’t know what the ascender height contains. For this reason, there is talk about the renaming text To from-font.

Only cut above the cap height

To cut beyond the cap height:

text-box-edge: cap; /* Computed as text-box-edge: cap text; */

Remember that undeclared values ​​default to text, not auto (as shown above). Therefore, to disable bottom edge cropping, you need to use: trim-start instead from trim-both:

text-box-trim: trim-start; /* Not text-box-trim: trim-both; */
text-box-edge: cap; /* Not computed as text-box-edge: cap text; */

Cut above the cap height and below the alphabetic baseline

To shorten above the cap height and below the alphabetic baseline:

text-box-trim: trim-both;
text-box-edge: cap alphabetic;

By the way, that’s exactly what the “Cap Height to Baseline” option in Figma’s “Vertical Crop” setting does. However, its Dev mode produces CSS code with deprecated property names (leading-trim And text-edge) and obsolete values ​​(top And bottom).

Only cut above the x-height

To trim only above the x-height:

text-box-trim: trim-start;
text-box-edge: ex;

Crop above the x-height and below the alphabetic baseline

To trim above the x-height and below the alphabetic baseline:

text-box-trim: trim-both;
text-box-edge: ex alphabetic;

Only cut below the alphabetic baseline

To trim just below the alphabetic baseline, do the following habit Work (it was going so well for a moment, wasn’t it?):

text-box-trim: trim-end;
text-box-edge: alphabetic;

This is because the first value is always the mandatory over-edge value, while the second value is an optional under-edge value. This means that alphabetic is not a valid over-edge value, even if the inclusion of trim-end indicates that we will not provide one. Complaints about verbosity aside, correct syntax would have you declaring every over-edge value, even though you would effectively be declaring it with trim-end:

text-box-trim: trim-end;
text-box-edge: [any over edge value] alphabetic;

What about ideographic glyphs?

It’s hard to know how web browsers prune ideographic glyphs until they do, but you can read all about it in the specification. In theory you would want to use that ideographic-ink Value for trimming and the ideographic Value for no trimming, both of which are not yet supported:

text-box-edge: ideographic; /* No trim */
text-box-edge: ideographic-ink; /* Trim */
text-box-edge: ideographic-ink ideographic; /* Top trim */
text-box-edge: ideographic ideographic-ink; /* Bottom trim */

text-boxthe abbreviation property

If you don’t like the verbosity of cropping text boxes, there is a shortcut text-box Property that makes it somewhat inconsequential. The same rules apply.

/* Syntax */
text-box: [text-box-trim] [text-box-edge (over)] [text-box-edge (under)]?

/* Example */
text-box: trim-both cap alphabetic;

Final thoughts

At first glance, text-box-trim And text-box-edge This may not seem particularly interesting, but they make spacing elements a lot easier.

However, is the current proposal the best way to handle cropping of text fields? Personally I don’t think so. I find text-box-trim-start And text-box-trim-end would make a lot more sense with text-box-trim is used as an abbreviation property and text-box-edge is not used at all, but I would be happy with a simplification and/or consistent approach. What do you think?

There are some other concerns too. For example, Should there be an option to insert underlining, overlining, hanging punctuation, or diacritical marks? I will say yes, especially if you use it text-underline-position: under or a particularly thick one text-decoration-thicknessas they can make the space between elements appear smaller.