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

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:

See the Pen text-decoration-skip by CSS-Tricks (@css-tricks) on CodePen.

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

These are the proposed 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;.

See the Pen -webkit-text-decoration-skip: none; by CSS-Tricks (@css-tricks) on CodePen.

Related

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

ChromeOperaFirefoxIEEdgeSafari
644958NoNoTP*

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
11*NoNo566155

Comments

  1. User Avatar
    Tigt
    Permalink to comment#

    I found a browser to add to the support table: Netscape 3!

  2. User Avatar
    Michael
    Permalink to comment#

    NO BROWSER SUPPORT!!!! ARGHHHHHH what is the point of it then?

    • User Avatar
      Brandon
      Permalink to comment#

      But it does have browser support. And if it a browser doesn’t support it… then nbd it’s purely a visual enhancement.

  3. User Avatar
    Nirusu
    Permalink to comment#

    Looks like safari now supports it. No prefix.

  4. User Avatar
    jab
    Permalink to comment#

    Support for text-decoration-skip with values objects, ink just landed in Chromium’s master branch:
    https://bugs.chromium.org/p/chromium/issues/detail?id=649700

    Worth adding a Codepen to demonstrate this, so users can view this page in Canary (once it lands soon) to see it in action?

    • User Avatar
      Adolfo
      Permalink to comment#

      And it landed in Chrom{e|ium} 57! If you can’t make it work, make sure you go to chrome://flags/#enable-experimental-web-platform-features and switch that preference on.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag