Dotted underlines don't render properly in Chrome

Question

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

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

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>

Christmas

Seems like it works for bigger fonts. jsfiddle.net/phiter/v76b4hht – Asir

If its a button, why not use <button>? – Dormie

You could replace the text-decoration with a border-bottom dotted – Ostensive

I confirm it on Windows 10. If feels like yet another Chrome bug. – Mcinerney

Good catch @Phiter. I made a fiddle with multiple sizes, it looks like it only bugs out between 16 and 20px. jsfiddle.net/povLxu11 – Christmas

Answer 1

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.

Waxy

Good catch ! So it is indeed a bug. I'll leave it like this and hope Google fixes it eventually. – Christmas

This fix does look better to me. As of Chrome 86, I am not sure what to suggest the correct functionality should be, perhaps text-decoration-skip-ink: none should be the default. – Quintin