I’ve encountered two bugs in Chrome whereas testing the brand new CSS text-decoration-thickness and text-underline-offset properties, and I wish to share them with you right here on this article.
However first, let’s acknowledge one factor:
Default underlines are inconsistent
Let’s add a textual content hyperlink to a plain net web page, set its font-family to Arial, and evaluate the underlines throughout browsers and working techniques.
From left to proper: Chrome, Safari, and Firefox on macOS; Safari on iOS; Chrome, and Firefox on Home windows; Chrome, and Firefox on Android.
As you possibly can see, the default underline is inconsistent throughout browsers. Every browser chooses their very own default thickness and vertical place (offset from the baseline) for the underline. That is consistent with the CSS Textual content Ornament module, which specifies the next default conduct (auto worth):
The person agent chooses an applicable thickness for textual content ornament traces. […] The person agent chooses an applicable offset for underlines.
Fortunately, we are able to override the browsers’ defaults
There are two new, extensively supported CSS properties that permit us to exactly outline the thickness and offset for our underlines:
text-decoration-thicknesstext-underline-offset
With these properties, we are able to create constant underlines even throughout two very completely different browsers, such because the Gecko-based Firefox on Android and the WebKit-based Safari on macOS.
h1 {
text-decoration: underline;
text-decoration-thickness: 0.04em;
text-underline-offset: 0.03em;
}
Prime row: the browsers’ default underlines; backside row: constant underlines with CSS. (Demo)
Word: The text-decoration-thickness property additionally has a particular from-font worth that instructs browsers to make use of the font’s personal most well-liked underline width, if out there. I examined this worth with a couple of completely different fonts, however the underlines had been inconsistent.
OK, so let’s transfer on to the 2 Chrome bugs I famous earlier.
Chrome bug 1: Underlines are too skinny on macOS
In the event you set the text-decoration-thickness property to a font-relative size worth that computes to a non-integer pixel worth, Chrome will “ground” that worth as a substitute of rounding it to the closest integer. For instance, if the declared thickness is 0.06em, and that computes to 1.92px, Chrome will paint a thickness of 1px as a substitute of 2px. This challenge is restricted to macOS.
a {
font-size: 2em; /* computes to 32px */
text-decoration-thickness: 0.06em; /* computes to 1.92px */
}
Within the following screenshot, discover how the textual content ornament traces are twice as skinny in Chrome (third row) than in Safari and Firefox.
From prime to backside: Safari, Firefox, and Chrome on macOS. (Demo)
For extra details about this bug, see Chromium challenge #1255280.
Chrome bug 2: Underlines are too low
The text-underline-offset property permits us to exactly set the gap between the alphabetic baseline and the underline (the underline’s offset from the baseline). Sadly, this characteristic is presently not applied appropriately in Chrome and, because of this, the underline is positioned too low.
h1 {
text-decoration: underline;
text-decoration-color: #f707;
/* disable “skip ink” */
-webkit-text-decoration-skip: none; /* Safari */
text-decoration-skip-ink: none;
/* cowl the whole descender */
text-decoration-thickness: 0.175em; /* descender peak */
text-underline-offset: 0; /* no offset from baseline */
}
Due to this bug, it isn’t attainable to maneuver the underline all the best way as much as the baseline in Chrome.
From left to proper: Safari, Firefox, and Chrome on macOS. View this demo on CodePen.
For extra details about this bug, see Chromium challenge #1172623.
Word: As you might need observed from the picture above, Safari attracts underlines on prime of descenders as a substitute of beneath them. This can be a WebKit bug that was fastened very not too long ago. The repair ought to ship within the subsequent model of Safari.
Assist prioritize the Chrome bugs
The 2 new CSS properties for styling underlines are a welcome addition to CSS. Hopefully, the 2 associated Chrome bugs can be fastened sooner somewhat than later. If these CSS options are vital to you, make your voice heard by starring the bugs in Chromium’s bug tracker.
Check in together with your Google account and click on the star button on points #1172623 and #1255280.
CSS Underlines Are Too Skinny and Too Low in Chrome initially printed on CSS-Tips
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!