<text-edge> CSS type
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
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.
Values
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 descenders 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-heightproperty.
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 not supported by any browser.
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.
Formal syntax
<text-edge> =
[ text | ideographic | ideographic-ink ] |
[ text | ideographic | ideographic-ink | cap | ex ] [ text | ideographic | ideographic-ink | alphabetic ]
Examples
Specifications
| Specification |
|---|
| CSS Inline Layout Module Level 3 # typedef-text-edge |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
<text-edge>
|
|
|
|
|
|
|
|
|
|
|
|
|
alphabetic
|
|
|
|
|
|
|
|
|
|
|
|
|
cap
|
|
|
|
|
|
|
|
|
|
|
|
|
ex
|
|
|
|
|
|
|
|
|
|
|
|
|
text
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- User must explicitly enable this feature.