The CSS text-decoration-skip-ink Property

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:

Value	Description
`none`	Underlines and overlines cross over glyph descenders and ascenders.
`auto`	Browsers may interrupt underlines and overlines to prevent them from touching or closely approaching a glyph, depending on the script of the text. (default)
`all`	Browsers 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

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes*	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)