Home >Web Front-end >CSS Tutorial >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
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!