text-decoration-skip-ink

Definition

The text-decoration-skip-ink CSS property is used to control whether or not text decoration should skip ink gaps in letterforms. Ink gaps refer to the small spaces or openings within certain letters, such as lowercase “e” or “o”. By default, text decorations may cross over these ink gaps, causing the decoration to overlap the letterforms.

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

• auto: This is the default value. The browser determines whether to skip ink gaps or not based on its own rendering algorithms.
• none: Text decoration does not skip ink gaps and may overlap the letterforms.

Here’s an example:

.decorated-text {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

In this example, the .decorated-text class sets the text-decoration property to underline and the text-decoration-skip-ink property to auto. This allows the browser to decide whether to skip ink gaps for the underline decoration.

It’s important to note that the text-decoration-skip-ink property is currently supported in some modern browsers, but its behavior may vary. Not all browsers support this property, and the level of support may differ across browser versions.

The text-decoration-skip-ink property can be useful when you want to ensure that text decorations, such as underlines, do not overlap the ink gaps within letterforms, providing a cleaner and more readable appearance. However, its effectiveness depends on browser support and rendering algorithms.

Syntax

a {
  text-decoration-skip-ink: auto;
}

Values

• auto: skip descenders for improved readability (default).
• none: draw the line straight through glyph descenders.
• all: skip all signifiant ink (rare).

Practical Examples

a {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

Most browsers default to auto, but explicitly setting it ensures consistent behavior.

<div class="flex gap-6 text-lg text-slate-900">
  <a href="#" style="text-decoration: underline; text-decoration-skip-ink: none;">No skip</a>
  <a href="#" style="text-decoration: underline; text-decoration-skip-ink: auto;">Auto skip</a>
</div>

Tips & Best Practices

• For custom underline effects, combine with text-underline-offset and text-decoration-thickness.
• If using none, ensure underlines do not make text illegible.

Accessibility & UX Notes

Skipped ink improves clarity; avoid disabling unless a design specifically requires straight lines.

Browser Support

Supported by modern browsers (Chrome 57+, Firefox 70+, Safari 12.1+).

Related

• text-decoration-skip legacy equivalent.
• text-decoration shorthand.
• text-underline-offset.