text-decoration-skip

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:

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 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

• CSS Text Decoration Module Level 4
  Editor’s Draft
• text-decoration-skip at MSDN.
• Discussion of adding trailing-spaces as a value from the W3C mailing list.
• Improving text readability for dyslexic users with skip-ink underlines
• text-decoration-skip on MDN
• text-decoration-skip-ink on MDN

Browser support

Related