text-decoration-skip

Avatar of Marie Mosley
Marie Mosley on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

The text-decoration-skip property specifies where a text underline, overline, or strike-through should break. This improves legibility of decorated text and corrects punctuation grammar for some languages.

Here’s one example:

a {
  text-decoration-skip: ink;
}

Heads up! The ink value has been changed to an entirely new property, text-decoration-skip-ink: auto;.

If your browser supports this property then you’ll notice here that the descenders of each character (like “y” and “p”) have little white spaces around the border:

If your browser doesn’t support this feature then this is what you ought to expect from the property in a supporting browser:

This may not be what text-decoration-skip: ink; actually looks like when it gets implemented, but this descender-clearing style is part of Marcin Wichary’s vision for a perfect underline as he lays out here.

Values

  • objects: the default. Decoration line skips inline objects, like images or inline-block elements.
  • none: decoration line crosses everything, including inline objects that would normally be skipped.
  • spaces: decoration line skips spaces, word-separator characters, and any spaces set with letter-spacing or word-spacing.
  • ink: decoration line skip glyphs or descenders.
  • edges: decoration line starts slightly after the content’s starting edge and ends slightly before the content’s ending edge. This property was designed to keep two side-by-side underlined elements from looking like they’re sharing a single underline. This is useful for text in the Chinese language, which uses underlining for punctuation.
  • box-decoration: decoration line skips over inherited margin, border, and padding.

Update: it looks like the trailing-spaces value has now been deprecated, since it can no longer be found in the spec.

Since this property is not supported by any browser yet there’s no demo, but here’s an example of how each of the values could look once text-decoration-skip is implemented.

text-decoration-skip illustration

text-decoration-skip in OSX and iOS

In late 2014, Apple made a change to text-decoration in Safari and iOS browsers that mimics how text-decoration-skip: ink; should work. Though none of the text-decoration-skip values are officially implemented yet, you can disable this default behavior with -webkit-text-decoration-skip: none;.

More Information

Browser support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
125126No122TP

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
12212312217.4*