CSS <text-edge> Data Type

The CSS <text-edge> data type identifies font metric edges that can be used when determining the boundaries of text. These values allow CSS text box features to work with specific typographic measurements instead of relying only on the normal line box.

Syntax

The <text-edge> data type is composed of an over edge and an optional under edge:

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

When two values are supplied, the first identifies the over edge and the second identifies the under edge.

Text-edge Values

Value	Description
`text`	Uses the font's text-over or text-under edge, based on the font metrics used for normal text layout.
`cap`	Uses the cap-height edge of the font.
`ex`	Uses the x-height edge of the font.
`alphabetic`	Uses the alphabetic baseline as an under edge.
`ideographic`	Uses the font's ideographic em-box edge.
`ideographic-ink`	Uses an ideographic edge based on the font's ink bounds.

Not every keyword is valid in both positions. For example, cap and ex describe over edges, while alphabetic describes an under edge.

Over Edge

The first value identifies the edge on the over side of the text. In horizontal Latin text, this generally corresponds to an edge above the text.

text
cap
ex
ideographic
ideographic-ink

The cap value corresponds to the font's cap height, while ex corresponds to its x-height.

Under Edge

When a second value is specified, it identifies the edge on the under side of the text. In horizontal Latin text, this generally corresponds to an edge below the text.

cap alphabetic
text text
ideographic ideographic
ideographic-ink ideographic-ink

The alphabetic keyword uses the alphabetic baseline as the under edge and is commonly paired with an over-edge value such as cap or ex.

Text Box Edges

Text edge values are useful when CSS needs to identify typographic boundaries more precisely than the normal line box. They can be used by text box features to remove or control space associated with font metrics above and below text.

text-box-edge: cap alphabetic;

In this example, the cap-height edge is used on the over side and the alphabetic baseline is used on the under side.

<text-edge> Example

The following example uses the cap alphabetic text edges with text-box-edge:

.text-edge-example {
  text-box-edge: cap alphabetic;
  text-box-trim: trim-both;
}

Browser Result

CSS Text

The Browser Result illustrates the typographic area that text edge values are intended to describe. The exact font metrics depend on the font being used.

The <text-edge> data type is associated with CSS properties that control the edges and trimming of text boxes, including:

Specifications

The <text-edge> data type is defined in the CSS Inline Layout Module Level 3 .

CSS <text-edge> Data Type