text-decoration-skip-ink

The text-decoration-skip-ink CSS property specifies how overlines and underlines are drawn when they pass over glyph ascenders and descenders.

/* Single keyword */
text-decoration-skip-ink: none;
text-decoration-skip-ink: auto;

/* Global keywords */
text-decoration-skip: inherit;
text-decoration-skip: initial;
text-decoration-skip: unset;

Initial valueauto
Applies toall elements
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderorder of appearance in the formal grammar of the values

Syntax

Values

none
The default — underlines and overlines are drawn across the full length of the text content, including parts that cross over glyph descenders and ascenders.
auto
Underlines and overlines are only drawn where they do not touch or closely approach a glyph. I.e. they are interrupted where they would otherwise cross over a glyph.
An example of "text-decoration-skip: ink;".

Formal Syntax

auto | none

Example

HTML content

<p>You should go and grab a cup of coffee.</p>

CSS content

p {
  margin: 0;
  font-size: 2em;
  text-decoration: underline blue;
  text-decoration-skip-ink: auto;
}

Result

Specifications

Specification Status Comment
CSS Text Decoration Module Level 4
The definition of 'text-decoration-skip-ink' in that specification.
Editor's Draft Initial definition

Browser Compatibility

 

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support64 No No No50 No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic support6464 No No No50 No

Document Tags and Contributors

 Contributors to this page: fscholz, chrisdavidmills
 Last updated by: fscholz,