CSS Underlines Are Too Thin and Too Low in Chrome

Detailed explanation and repair suggestions for CSS underline display of Chrome browser

This article will discuss two issues encountered when testing the new CSS properties text-decoration-thickness and text-underline-offset in Chrome.

Table of contents

• The default underscore is inconsistent
• Override the browser default style
• Chrome Bug 1: The underlined under macOS system is too thin
• Chrome Bug 2: Underlined position too low
• How to help solve Chrome browser bugs first

The default underscore is inconsistent

Add text links to a simple web page, set the font to Arial, and then compare the underlined display effects under different browsers and operating systems. The results show that the default underscore thickness and vertical position (baseline offset) of different browsers are inconsistent. This complies with the provisions of the CSS text decorating module, which specifies the following default behavior (auto value):

The user agent selects the appropriate text decorative line thickness. [...] User agent selects the appropriate underscore offset.

Override the browser default style

Two new CSS properties can accurately define the thickness and offset of the underscore:

• text-decoration-thickness
• text-underline-offset

Using these two properties, you can create consistent underscore effects even on different browsers such as Firefox (Gecko engine) and Safari (WebKit engine).

 h1 {
  text-decoration: underline;
  text-decoration-thickness: 0.04em;
  text-underline-offset: 0.03em;
}

Note: text-decoration-thickness property also has a special from-font value that instructs the browser to use the preferred underline width of the font itself (if available). After testing, the underscore effect of different fonts is still inconsistent.

Chrome Bug 1: The underlined under macOS system is too thin

If text-decoration-thickness property is set to a font-related length value that is calculated as a non-integer pixel value, Chrome will round down instead of rounding. For example, if the declared weight is 0.06em and the calculation is 1.92px , Chrome will draw an underscore of 1px weight instead of 2px. This issue is limited to macOS systems only.

 a {
  font-size: 2em; /* The calculation result is 32px */
  text-decoration-thickness: 0.06em; /* The calculation result is 1.92px */
}

Screenshots show that the text decorating line in Chrome (third line) is twice as thin as in Safari and Firefox browsers.

For more information, please refer to Chromium issue #1255280.

Chrome Bug 2: Underlined position too low

text-underline-offset property allows precisely setting the distance between the letter baseline and the underscore (the offset of the underscore relative to the baseline). Unfortunately, Chrome browser does not implement this correctly at the moment, resulting in the underscore position being too low.

 h1 {
  text-decoration: underline;
  text-decoration-color: #f707;

  /* Disable "Skip Ink" */
  -webkit-text-decoration-skip: none; /* Safari */
  text-decoration-skip-ink: none;

  /* Cover the entire sinking line*/
  text-decoration-thickness: 0.175em; /* sinking line height*/
  text-underline-offset: 0; /* baseline without offset*/
}

Due to this bug, the underscore cannot be moved completely to the baseline.

For more information, please refer to Chromium issue #1172623.

Note: As shown in the above image, Safari draws underlines at the top of the sinking line instead of the bottom. This is a WebKit bug that has been fixed recently. This fix should be included in the next version of Safari.

How to help solve Chrome browser bugs first

The two new CSS properties used to style underline are welcome additions to CSS. I hope these two related Chrome bugs can be fixed as soon as possible. If these CSS features are important to you, add starring to these bugs in Chromium’s bug tracker to express your concern.

The above is the detailed content of CSS Underlines Are Too Thin and Too Low in Chrome. For more information, please follow other related articles on the PHP Chinese website!