<text-edge>

Limited availability

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

The <text-edge> enumerated data type defines keywords that specify font metrics representing specific regions on a font's block-start edge and block-end edge. Each keyword specifies a position of a font's over and/or under edge.

The <text-edge> values are used in the text-box-edge property to specify an amount of space to trim from the block-start and block-end edge of a text element's block container.

Syntax

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

Note: The ideographic and ideographic-ink keywords are intended to specify over and under edge positions specific to CJK language characters. Currently their exact behavior is being debated and they are are not supported by any browser.

Values

The <text-edge> data type is composed of one or two keywords representing specific regions on a font's block-start (over) edge and/or block-end (under) edge:

  • When one value is specified, the position of the font's over edge and under edge are specified using that same keyword.
  • When two values are specified, the first value specifies the position of the font's over edge, and the second value specifies the position of the font's under edge.

Single keyword values

text

The font's over and under edges are its text-over baseline/text-under baseline: this includes the font's ascenders and decenders but excludes the half-leading set on the text.

Note: The amount of half-leading included on a text element can be controlled using the line-height property.

Two keyword values

alphabetic

The font's under edge is its alphabetic baseline, which is the bottom of its short lower-case letters (for example, "m", "n", and "o") or capital letters.

cap

The font's over edge is its cap-height baseline, which is the top of its capital letters.

ex

The font's over edge is its x-height baseline, which is the top of its short lower-case letters.

text

The font's over edge is its text-over baseline (includes the font's ascenders but excludes the over edge half-leading), or its under edge is its text-under baseline (includes the font's descenders but excludes the under edge half-leading), depending on which edge the value is set for.

Examples

See text-box-edge examples

Specifications

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

Browser compatibility

BCD tables only load in the browser

See also