Two CSS Properties for Trimming Text Box Whitespace

The

and text-box-trim properties of the text-box-edgeCSS allow developers to accurately control the amount of blank spaces above the first line of text and below the last line of text in the text box. These blanks will make the vertical height of the text box greater than its content height.

This blank is called leading (line spacing), and it appears above and below all text lines (actually two and a half line spacing) to improve the readability of the text. But we just want it to appear between lines of text, right? We don't want it to appear on the upper and lower edges of the text box because it affects our margins, fills, gaps, and other spacing.

For example, if we implement a 50px margin, but the line spacing increases by 37px, there will be a total of 87px space in total. Then we need to adjust the margin to 13px to make the space 50px in practice.

As a design system guy, I try to keep as much consistency as possible and use as few markers as possible, which allows me to use the adjacent brother selector ( ) to create a common rule like this:

/* 当 <element> 后面跟着 <h1> 时 */
<element> + h1 {
  margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>

This method is still troublesome because you still need to do the calculations (although less computationally). However, using the text-box-trim and text-box-edge properties, 50px defined in CSS visually means 50px:

Disclaimer: text-box-trim and text-box-edge are accessible only through the feature flags of Chrome 128 and Safari 16.4, as well as the Safari technology preview without feature flags. See Caniuse for the latest browser support information.

Start from text-box-trim

is a CSS property that activates text box trimming. It has no other purpose in itself, but it does give us options to start, end, start and end or end: text-box-trim

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 an older value instead of a new start/end/both value. In older web browsers, you may need to use trim-start/trim-end/trim-both. Unfortunately, there is no reference for this, so you just need to see what works. top/bottom/both

Now, where do you want to prune?

You may want to know what I mean. Consider that a typographic letter has multiple peaks.

There is x height, which marks the top of the letter "x" and other lowercase characters (not including the ascending or upper extension), the uppercase height, which marks the top of the uppercase characters (again, not including the ascending or upper extension), and the letter baseline, which marks the bottom of most letters (not including the ascending or lower extension). Of course, there are also the lifting height and the lowering height.

You can trim the blank between the x height, capital height, or ascending height and the "up" edge of the text box (which is where the upper scribing starts), and the blank between the letter baseline or lower scribing height and the "lower" edge (if text-underline-position is set to under, then where the underline starts).

Don't trim anything

text-box-edge: leading means that all line spacing is included; simply, do not trim anything. This is the same as text-box-trim: none or omitting text-box-trim and text-box-edge completely. You can also use text-box-trim: trim-start to limit lower edge trimming or use text-box-trim: trim-end to limit upper edge trimming. Yes, there are many ways to not do this at all!

Newer web browsers have deviated from the CSSWG specification work draft by deleting the leading value and replacing it with auto despite the "Don't publish (not yet)" warning (*shrugging*).

Of course, text-box-edge accepts two values ​​(instructions about the upper edge, and then instructions about the lower edge). However, auto must be used separately.

/* 当 <element> 后面跟着 <h1> 时 */
<element> + h1 {
  margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>

I can explain all the scenarios auto that work, but none of them are valid. I think all we want is to be able to set the upper or lower edge to auto and set the other edge to something else, but that's exactly what it doesn't do. This is a question, but we will dig deeper soon.

Trim the upper part of the lift and/or the lower part of the lower part

text If used as the first value, the above-up portion will be trimmed; if used as the second value, the below-down portion will be trimmed; if not declared, it is also the default value. (I think you want it to be auto, but it won't be.)

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

It is worth noting that the lift and lower height measurements come from the font itself (or not!), so text can be very picky. For example, for Arial fonts, the height of the rise includes the diacritics, the height of the fall includes the drop, and for Fravances fonts, the height of the fall includes the diacritics, I don't know what the height of the rise includes. So, there is a discussion about renaming text to from-font.

Trip only above the capital height

To trim above the capital height:

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

Remember, undeclared values ​​default to text, not auto (as shown above). So to choose not to trim the lower edge, you need to use trim-start instead of trim-both:

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;` */

Trip the upper case height and below the letter baseline

To trim the upper case height and below the baseline of the letter:

/* 当 <element> 后面跟着 <h1> 时 */
<element> + h1 {
  margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>

By the way, the Caps Height to Baseline option of Figma's Vertical Trim setting does exactly this. However, its development mode generates CSS code with obsolete attribute names (leading-trim and text-edge) and obsolete values ​​(top and bottom).

Trip only above x height

To trim only above x height:

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

Trip x height above and below the letter baseline

To trim the x height above and below the letter baseline:

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

Trip only below the baseline of letters

To trim only below the letter baseline, the following is invalid (Things go so smoothly, didn't it?):

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;` */

This is because the first value is always a required upper edge value, while the second value is an optional lower edge value. This means that alphabetic is not a valid upper edge value, even if including trim-end means we will not provide one. Apart from the verbose complaints, the correct syntax will let you declare any upper edge value, even if you actually cancel it with trim-end:

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

Where is the hieroglyph?

It's hard to know how they will be pruned before a web browser trims, but you can read everything in the specification. In theory, you need to use the ideographic-ink value for trimming, and use the ideographic value without trimming, both are currently not supported:

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

text-box, abbreviation attribute

If you don't like the verboseness of text box trimming, there is an abbreviation text-box attribute that makes it less important. All the same rules apply.

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

The final thought

At first glance, text-box-trim and text-box-edge may not seem that interesting, but they do make the spacing elements much simpler.

But is the current proposal the best way to deal with text box trimming? Personally, I don't think so. I think text-box-trim-start and text-box-trim-end would make more sense, text-box-trim is used as abbreviation attribute, and text-box-edge is not used at all, but I am willing to accept some simplified and/or consistent approach. What do you think?

There are some other concerns. For example, should there be an option to include underscores, overscores, hanging punctuation marks, or diacritic marks? I would say yes, especially if you are using text-underline-position: under or particularly thick text-decoration-thickness as they will make the spacing between the elements appear smaller.

The above is the detailed content of Two CSS Properties for Trimming Text Box Whitespace. For more information, please follow other related articles on the PHP Chinese website!