CODEWITHSUNDEEP
cssgoogle-chromeunderlinetext-decorations
Brachamul
Brachamul

Reputation: 1974

Dotted underlines don't render properly in Chrome

Using Chrome 65, it looks like the text-decoration: underline dotted; yields an unelegant result :

enter image description here

Whereas on Firefox, i'm getting the expected outcome :

enter image description here

What's wrong with chrome ?

I expanded the snippet with a further test. It seems to only fail with certain font sizes and font faces. Specifically here with Trebuchet MS and 18px font-size.

span{
  text-decoration: underline dotted;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  padding: 1rem;
  background-color: black;
  color: white;
  display: inline-block;
  margin: 1rem;
}
<span style="font-size: 12px;">
  A 12px button of some sort
</span>

<span style="font-size: 14px;">
  A 14px button of some sort
</span>

<span style="font-size: 16px;">
  A 16px button of some sort
</span>

<span style="font-size: 18px; background-color: darkRed;">
  A 18px button of some sort
</span>

<span style="font-size: 20px;">
  A 20px button of some sort
</span>

Upvotes: 12

Views: 3420

Answers (1)

Josh Lee
Josh Lee

Reputation: 177875

Use text-decoration-skip-ink: none (The default was changed to auto in https://crrev.com/514104.)

If you look closely, the gaps in the underline correspond to the loops at the bottom of the letters, which lie very close to the baseline of the font. It appears that the skip-ink algorithm is choosing to cut the underlines off here — but only for dotted and dashed, and only at certain font sizes.

https://crbug.com/808603 suggests that the underlying reason is that the dots and dashes are two pixels tall.

Upvotes: 16

Related Questions