CSS text-decoration-skip-ink Enhance Text Readability

Introduction

The text-decoration-skip-ink CSS property controls how underlines and overlines are drawn when they intersect with the ascenders and descenders of text glyphs. This property is particularly useful for improving the readability of text, especially in languages with complex characters like Chinese, Japanese, and Korean (CJK).

Specification

The text-decoration-skip-ink property is defined in the CSS Text Decoration Module Level 4. This module describes the behavior of text decorations and how they interact with text content. The property ensures that decorations do not interfere with the readability of the text.

Description

The text-decoration-skip-ink property controls how underlines and overlines are drawn when they pass over the ascenders and descenders of glyphs. This property improves text readability by preventing decorations from intersecting with characters.

The property has three main values:

1. auto: The default value. The browser may interrupt underlines and overlines to avoid touching glyphs.
2. none: Underlines and overlines are drawn continuously across the text, even if they intersect with glyphs.
3. all: The browser must interrupt underlines and overlines to avoid touching glyphs. This is particularly useful for CJK fonts.

Syntax

The text-decoration-skip-ink property is easy to use. Here’s the syntax:

/* Single keyword */
text-decoration-skip-ink: none;
text-decoration-skip-ink: auto;
text-decoration-skip-ink: all;

/* Global keywords */
text-decoration-skip-ink: inherit;
text-decoration-skip-ink: initial;
text-decoration-skip-ink: revert;
text-decoration-skip-ink: revert-layer;
text-decoration-skip-ink: unset;

Values

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

1. none:
   • Underlines and overlines are drawn continuously across the text, even if they intersect with glyphs.

   text-decoration-skip-ink: none;

2. auto:
   • The default value. The browser may interrupt underlines and overlines to avoid touching glyphs.

   text-decoration-skip-ink: auto;

3. all:
   • The browser must interrupt underlines and overlines to avoid touching glyphs.

   text-decoration-skip-ink: all;

Additionally, the property supports global keywords:

4. inherit:
   • Inherits the value from the parent element.

   text-decoration-skip-ink: inherit;

5. initial:
   • Sets the property to its initial value, which is auto.

   text-decoration-skip-ink: initial;

6. revert:
   • Resets the property to the user agent’s default stylesheet value.

   text-decoration-skip-ink: revert;

7. revert-layer:
   • Resets the property to the value defined by the user agent stylesheet, if any, for the originating layer.

   text-decoration-skip-ink: revert-layer;

8. unset:
   • Resets the property to its natural value, which means it behaves as either inherit or initial.

   text-decoration-skip-ink: unset;

Formal Definition

• Initial Value: auto
• Applies To: All elements
• Inherited: Yes
• Computed Value: As specified
• Animation Type: Discrete

Formal Syntax

The formal syntax for the text-decoration-skip-ink property is:

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

Examples

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

The above code demonstrates how the text-decoration-skip-ink property affects the rendering of underlines and overlines in different scenarios. The auto value shows the default behavior, the none value shows continuous underlines, and the all value ensures that underlines are always interrupted to avoid touching glyphs.

Browser Compatibility

The text-decoration-skip-ink property is supported by most modern browsers:

• Google Chrome 64
• Edge 79
• Firefox 70
• Opera 50
• Safari 15.4

See Also

For more information on related CSS properties, you can refer to:

• [text-decoration]WebsiteUrl
• [text-decoration-skip]WebsiteUrl

These properties work together with text-decoration-skip-ink to control various aspects of text decoration in web design.

By understanding and utilizing the text-decoration-skip-ink property, you can enhance the readability and visual appeal of your web content, providing a better user experience.