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.