C C++ CMake CSS Cypress date-fns Django Django REST Framework ESLint Git GNU Make HTML htmx HTTP JavaScript MariaDB NumPy pandas PHP PostgreSQL Python PyTorch Qt SQLite Tailwind CSS

Enhancing Readability: How text-decoration-skip-ink Improves Underlines and Overlines


Purpose

  • Controls how underlines and overlines (but not strikethroughs) are rendered when they pass through the ascenders (top parts) and descenders (bottom parts) of letters.

Values

  • none: Underlines and overlines are drawn through the entire character, potentially cutting through parts of letters like "y", "g", or "p".
  • auto (default): Underlines and overlines are "skipped" over the ascenders and descenders, creating a cleaner visual appearance.

How it Works

  1. When you apply an underline or overline decoration to text (text-decoration: underline or text-decoration: overline), the browser normally draws a straight line across the entire content.
  2. With text-decoration-skip-ink, the browser can adjust the line's path to avoid interrupting the character shapes.
    • For auto (default), the line dips slightly to skip the ascenders and descenders.
    • For none, the line remains a straight line, potentially cutting through parts of characters.

Use Cases

  • Maintaining a consistent visual appearance for underlines and overlines across different fonts and letter shapes.
  • Enhancing text readability, especially for underlined or overlined links or emphasized text.

Browser Compatibility

  • For older browsers that might not support it, you can use a fallback approach by setting a background color for the underline or overline and adjusting its height to clear the ascenders and descenders.
  • text-decoration-skip-ink is generally well-supported in modern browsers.

Example

a {
  text-decoration: underline;
  text-decoration-skip-ink: auto; /* Ensures clean underlining for links */
}
  • This property only affects underlines and overlines, not strikethroughs.

Using text-decoration-skip-ink: none; (Underlines cutting through characters)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text-decoration-skip-ink: none Example</title>
<style>
  .underline {
    text-decoration: underline;
    text-decoration-skip-ink: none; /* Notice the value here */
  }
</style>
</head>
<body>
  <p class="underline">This text has an underline that cuts through characters like "y" and "p".</p>
</body>
</html>

Emphasized text with clean underline (using auto)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text-decoration-skip-ink: auto Example</title>
<style>
  .emphasized {
    text-decoration: underline;
    text-decoration-skip-ink: auto; /* Default behavior, avoids cutting */
  }
</style>
</head>
<body>
  <p class="emphasized">This text is underlined with a clean appearance, thanks to "text-decoration-skip-ink: auto;".</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fallback for text-decoration-skip-ink</title>
<style>
  .underline {
    text-decoration: underline;
    /* Fallback for browsers without text-decoration-skip-ink support */
    text-shadow: none -1px 0 #fff;  /* White underline, adjust height as needed */
  }
</style>
</head>
<body>
  <p class="underline">This text uses a background for the underline to avoid cutting through characters (fallback approach).</p>
</body>
</html>

Using a background for the decoration

  • Example:
  • You can set a background color for the underline or overline and adjust its height to clear the ascenders and descenders.
  • This is a fallback approach for browsers that don't support text-decoration-skip-ink.
.underline {
  text-decoration: none; /* Remove default underline */
  background: -1px 0 red; /* Red underline, adjust color and height */
}

Choosing a different underline style

  • Example:
  • These styles might not require skipping areas within the characters.
  • Explore alternative underline styles like text-decoration: dotted or text-decoration: wavy.
a { /* For links */
  text-decoration: underline dotted red 2px; /* Dotted red underline */
}

Adjusting font metrics (advanced)

  • However, it's a complex technique and might not be suitable for most scenarios.
  • This approach involves modifying font metrics (like ascent and descent values) to influence character placement relative to the underline/overline.

Choosing the Best Alternative

The best alternative depends on your specific requirements:

  • Complexity
    If you're comfortable with advanced font metrics, you could explore that option, but it requires more effort.
  • Desired effect
    If dotted or wavy underlines suit your design, they eliminate the need for skipping ink.
  • Browser compatibility
    If you need widespread browser support, using a background for the decoration might be a good fallback.
  • Alternatives like background decorations or different underline styles offer workarounds but might have limitations or require additional considerations.
  • text-decoration-skip-ink is generally the most straightforward and recommended approach for achieving clean underlines and overlines across modern browsers.