1. css
  2. /properties
  3. /text-decoration-skip-ink

text-decoration-skip-ink

Overview

The text-decoration-skip-ink property provides control over how underlines and overlines interact with the descenders (e.g., 'g', 'j', 'p') and ascenders (e.g., 'b', 'd', 'h') of text glyphs. This property can help in achieving cleaner underlines and overlines, especially in languages with complex glyphs.

Examples and Usage

Let's demonstrate a basic example of the text-decoration-skip-ink property in action.

HTML Structure

<p class="skip-ink-auto">Are you a hypnotist or a psychologist?</p>

<p class="skip-ink-none">Are you a hypnotist or a psychologist?</p>

CSS Styling

p {
  font-size: 2em;
  text-decoration: underline orange; /* Underline with orange color */
}

.skip-ink-auto {
  text-decoration-skip-ink: auto; /* Default: Skips over descenders */
}

.skip-ink-none {
  text-decoration-skip-ink: none; /* Doesn't skip: Crosses descenders */
}

In this example, we have two identical sentences. The first sentence uses auto, which is the default value. It skips over descenders, ensuring that the underline doesn't intersect with them. On the other hand, the second sentence uses none, which means that the underline crosses the descenders.

In addition, there's also the possibility of the all value that finds specific usage in handling some East Asian languages like Chinese, Japanese, or Korean (CJK), where more precise control over text decoration skipping might be required.

Values

The text-decoration-skip-ink property accepts the following values:

ValueDescription
noneUnderlines and overlines cross over glyph descenders and ascenders.
autoBrowsers may interrupt underlines and overlines to prevent them from touching or closely approaching a glyph, depending on the script of the text. (default)
allBrowsers must interrupt underlines and overlines to prevent them from touching or closely approaching a glyph, even in cases where the auto behavior might not create interruptions, such as with certain CJK fonts.

Associated Properties

  • text-decoration-skip
  • text-decoration
  • text-decoration-line
  • text-decoration-style
  • text-decoration-color
  • text-decoration-thickness

Tips and Tricks

  • text-decoration-skip-ink isn't included in the text-decoration shorthand property. You need to declare it separately.

  • The property's behavior can be complex in certain contexts, especially with ideographic characters or user-generated content with unknown scripts. Use caution and test thoroughly in nuanced use cases.

  • Given the flexibility in the text-decoration-skip-ink property specification, browsers may exhibit varying renderings. This is due to their individual approaches to balancing aesthetic and performance factors.

Browser Compatibility

BrowserChromeEdgeSafariFirefoxOperaInternet Explorer
SupportYes*Yes*Yes*Yes*Yes*No

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers. (see more specifics in the Useful Resources below)

Useful Resources

Can I use: text-decoration-skip-ink

W3C's Editor's Draft of CSS Text Decoration Module Level 4: text-decoration-skip-ink

W3C's Working Draft of CSS Text Decoration Module Level 4: text-decoration-skip-ink