text-box-edge

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The text-box-edge CSS property specifies an amount of space to trim from a text element's block container.

Vertical spacing differs between fonts, making consistent typesetting historically challenging on the web. The text-box-edge property — along with its counterpart property text-box-trim, which specifies which edge(s) to trim space from — makes consistent typesetting easier to achieve. The text-box-edge property has no effect if text-box-trim is not set or is set to none.

Note: The text-box shorthand property can be used to specify the text-box-edge and text-box-trim values in a single declaration.

Syntax

css
/* Single keyword */
text-box-edge: auto;
text-box-edge: text;

/* Two <text-edge> values */
text-box-edge: text text;
text-box-edge: text alphabetic;
text-box-edge: cap alphabetic;
text-box-edge: ex text;

/* Global values */
text-box-edge: inherit;
text-box-edge: initial;
text-box-edge: revert;
text-box-edge: revert-layer;
text-box-edge: unset;

Value

The text-box-edge property value is specified as auto or a <text-edge> value:

auto

The default value. Equivalent to the text-edge value text.

<text-edge>

One or two separate keywords representing over and under edge positions to trim the text element's block container to.

  • If two values are specified, the first value specifies the trimming behavior to apply to the block-start (over) edge of the text, and the second value specifies the trimming behavior to apply to the block-end (under) edge of the text.
    • Valid over edge trimming values: text, cap, and ex.
    • Valid under edge trimming values: text and alphabetic.
  • If one value is specified, it specifies the over and under edge trimming behavior. At the time of writing, the only valid single value is text.

Description

The height of text-only content is relative to the height of the font. In digital font files, the height contains all characters, including capital letters, ascenders, descenders, etc. Different fonts have different base line-heights, meaning that lines of text with the same font-size will produce line boxes of differing heights, affecting the appearance of spacing between lines.

The text-box-edge property allows you to trim space from the start and/or end edge of the text's block container. This can include the leading at the text's block-start edge and block-end edges and the spacing defined inside the font (as described above). It does this by specifying a <text-edge> value that indicates the over edge and under edge to trim the space to.

Which edge(s) to trim space from is specified using the text-box-trim property. For example, you can choose to trim space from the over edge or the under edge of the text's block container, or both.

These properties make it much easier to control text spacing in the block direction.

Formal definition

Initial valueauto
Applies toBlock containers and inline boxes
Inheritedno
Computed valuethe specified keyword
Animation typediscrete

Formal syntax

text-box-edge = 
auto |
<text-edge>

<text-edge> =
[ text | ideographic | ideographic-ink ] |
[ text | ideographic | ideographic-ink | cap | ex ] [ text | ideographic | ideographic-ink | alphabetic ]

Examples

Basic text-box-edge usage

The most common text-box-edge values you'll use for horizontal writing-mode languages such as English or Arabic are cap alphabetic and ex alphabetic. The cap value trims the over edge of the text element's block container to the top of the capital letters, whereas ex trims the over edge to the font's x-height (the top edge of the short lower-case letters). In each case, alphabetic trims the under-edge flush with the text baseline.

In this example, we demonstrate the effect of both of these common values, on two <p> elements. Additionally, a text-box-trim value of trim-both has been set on both of them, so that their start and end edges are trimmed.

css
p {
  text-box-trim: trim-both;
  border-top: 5px solid magenta;
  border-bottom: 5px solid magenta;
}

.one {
  text-box-edge: cap alphabetic;
}

.two {
  text-box-edge: ex alphabetic;
}

Result

The output is as follows. Note how we've included a top and bottom border on each paragraph, so that you can see how the space has been trimmed in each case.

Interactive text-box-edge value comparison

For a complete interactive text-box-edge example, see the text-box-trim page.

Specifications

Specification
CSS Inline Layout Module Level 3
# text-box-edge

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-box-edge
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support

See also