CSS text-decoration-skip-ink Property

Description

The text-decoration-skip-ink CSS property is used to control how underlines and overlines on text should interact with descenders and ascenders of letters. It helps improve the visual appearance of text with decorative lines by preventing these lines from overlapping or cutting through the parts of letters that extend below the baseline or above the x-height. By using values like auto, none, or ink, web designers can fine-tune how text decorations are positioned, ensuring better legibility and aesthetics in typography on web pages. This property enhances the overall readability and user experience when styling text with decorative underlines or overlines.

Initial value: auto
Applies to: all elements
Inherited: yes
Computed value: as specified
Animatable: discrete
JavaScript syntax: object.style.textDecorationSkipInk

Interactive Demo

text-decoration-skip-ink: auto;

text-decoration-skip-ink: none;

The rusty swing set creaked.

Syntax

text-decoration-skip-ink: auto | none | all

Values

autoUnderlines and overlines are drawn across the full length of the text content, including parts that cross over glyph descenders and ascenders.
noneThe default — the browser may interrupt underlines and overlines so that they do not touch or closely approach a glyph. That is, they are interrupted where they would otherwise cross over a glyph.
allThe browser must interrupt underlines and overlines so that they do not touch or closely approach a glyph. This can be helpful with certain Chinese, Japanese, or Korean (CJK) fonts, where the auto behavior might not create interruptions.

Example

HTML

<p>You should go on a quest for a cup of coffee.</p>

<p class="no-skip-ink">Or maybe you'd prefer some tea?</p>

<p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p>

<p class="skip-ink-all">

  この文は、 text-decoration-skip-ink: all の使用例を示しています。

</p>

CSS

p {
  font-size: 1.5em;
  text-decoration: underline blue;
  text-decoration-skip-ink: auto; /* this is the default anyway */
}

.no-skip-ink {
  text-decoration-skip-ink: none;
}

.skip-ink-all {
  text-decoration-skip-ink: all;
}

Result

Editor