text-box-edge

Juan Diego Rodríguez on

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;
Diagramming text box dimensions on top of and below a string of text.
  • 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?

Showing the amount of space created by the leading, which is located below the content box.

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:

  1. 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.
Recipe Post layout with spacing between title and element's box
  1. 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:
A strong of text showing 21 pixels of space above and 19 pixels below.

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-edgeas 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