1804878 - Incorrect thickness of links underline (often the underlines are too thin)

Status: NEW

(Core :: Layout: Text and Fonts, enhancement)

Description

[5silentrain]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:107.0) Gecko/20100101 Firefox/107.0

Steps to reproduce:

I started to notice a long time ago that in FF the underline thickness of different links looks ugly and wrong compared to Chrome and Safari. Here are some examples:

https://steelseries.com/gaming-mice

https://www.google.com/search?client=firefox-b-d&q=apple

https://www.google.com/search?q=heejin+and+hyunjin&client=firefox-b-d&sxsrf=ALiCzsZYRxKXn9dBp6tUBDqspv_MP0KkCQ:1670585548371&source=lnms&tbm=isch&sa=X&ved=2ahUKEwiasrWRuOz7AhVDmIsKHSkFArwQ_AUoAXoECAIQAw&biw=1920&bih=845&dpr=2

Screenshots:

Firefox: https://i.imgur.com/ww8QBQ9.png
Chrome: https://i.imgur.com/ayJTo3t.png
Safari: https://i.imgur.com/JT9IZNv.png

Firefox: https://i.imgur.com/6cz84sp.png
Chrome: https://i.imgur.com/ftIgscN.png
Safari: https://i.imgur.com/PMNnKaL.png

Firefox: https://i.imgur.com/8KhSrsi.png
Chrome: https://i.imgur.com/uQ3adOx.png
Safari: https://i.imgur.com/SwLRWF3.png

Firefox: https://i.imgur.com/tKhIoM3.png
Chrome: https://i.imgur.com/PlwATf8.png
Safari: https://i.imgur.com/qPowVsM.png

Comment 1

[5silentrain]

Attachment: Firefox 1.png

Comment 2

[5silentrain]

Attachment: Chrome 1.png

Comment 3

[5silentrain]

Attachment: Safari 1.png

Comment 4

[5silentrain]

Attachment: Firefox 2.png

Comment 5

[5silentrain]

Attachment: Chrome 2.png

Comment 6

[5silentrain]

Attachment: Safari 2.png

Comment 7

[5silentrain]

Attachment: Firefox 3.png

Comment 8

[5silentrain]

Attachment: Chrome 3.png

Comment 9

[5silentrain]

Attachment: Safari 3.png

Comment 10

[5silentrain]

Attachment: Firefox 4.png

Comment 11

[5silentrain]

Attachment: Chrome 4.png

Comment 12

[5silentrain]

Attachment: Safari 4.png

Comment 13

[5silentrain]

On Wikipedia: https://en.wikipedia.org/wiki/Loona
Link underlines are too thin, which is especially noticeable on monitors with a high pixel density (my monitor LG 27UP650-W has 163 PPI). Looks terrible!!!

Firefox: https://i.imgur.com/4Mlcwan.png
Chrome: https://i.imgur.com/ZlIMoIf.png
Safari: https://i.imgur.com/zMN9DTt.png

Firefox: https://i.imgur.com/eO6p0Ox.png
Chrome: https://i.imgur.com/gJIFcao.png
Safari: https://i.imgur.com/wOnu8Eb.png

Comment 14

[5silentrain]

Attachment: Firefox 5.png

Comment 15

[5silentrain]

Attachment: Chrome 5.png

Comment 16

[5silentrain]

Attachment: Safari 5.png

Comment 17

[5silentrain]

Attachment: Firefox 6.png

Comment 18

[5silentrain]

Attachment: Chrome 6.png

Comment 19

[5silentrain]

Attachment: Safari 6.png

Comment 20

[Jonathan Kew [:jfkthame]]

I think what's happening in each of these cases is that Firefox is using the underline thickness specified by the font that's in use.

E.g. on the https://steelseries.com/gaming-mice page, the product name is using a webfont "ReplicaPro TT Heavy". Checking the 'post' table of that font, we find

    <underlinePosition value="-140"/>
    <underlineThickness value="20"/>

which means the specified underline thickness is 20/1000 of the font size. The size used there is approximately 18px, so the expected underline thickness would be 0.36px. Setting text-decoration-thickness: from-font; on the element in Chrome or Safari results in a similarly thin underline.

So Firefox is simply honoring what the font designer has specified. The author could override that using something like text-decoration-thickness: 0.1em (or any other desired value), but in the absence of any specific request from the author, we respect what the font asks for.

Comment 21

[5silentrain]

But it looks awful in Firefox compared to Chrome and Safari!

Comment 22

[5silentrain]

I also noticed that in Firefox the link underlines have the wrong spacing between the text and the underline.

Firefox: https://i.imgur.com/MiZ6JJs.png
Chrome: https://i.imgur.com/uS8sF2p.png
Safari: https://i.imgur.com/kD0eoap.png

Firefox: https://i.imgur.com/QIbM1eb.png
Chrome: https://i.imgur.com/gQwBeB6.png
Safari: https://i.imgur.com/nIqbzgx.png

Firefox: https://i.imgur.com/WQSZZOR.png
Chrome: https://i.imgur.com/g0lDiUt.png
Safari: https://i.imgur.com/wXEtbk7.png

Link to this page: https://www.mozilla.org/en-US/firefox/108.0.1/releasenotes/

Comment 23

[5silentrain]

Attachment: Firefox 7.png

Comment 24

[5silentrain]

Attachment: Chrome 7.png

Comment 25

[5silentrain]

Attachment: Safari 7.png

Comment 26

[5silentrain]

Attachment: Firefox 8.png

Comment 27

[5silentrain]

Attachment: Chrome 8.png

Comment 28

[5silentrain]

Attachment: Safari 8.png

Comment 29

[5silentrain]

Attachment: Firefox 9.png

Comment 30

[5silentrain]

Attachment: Chrome 9.png

Comment 31

[5silentrain]

Attachment: Safari 9.png

Comment 32

[5silentrain]

Here's another good example that clearly shows how badly Firefox renders link underlines: https://www.iphones.ru/iNotes/vladelcy-iphone-14-pro-nachinayut-zhalovatsya-na-ostatochnoe-izobrazhenie-iz-za-vsegda-vklyuchennogo-ekrana-04-26-2023

Screenshot: https://i.imgur.com/7riQU8j.png

🤦‍♂️ 🫣 👎

Comment 33

[5silentrain]

Attachment: Firefox 10.png

Comment 34

[5silentrain]

Now take a look at how Chrome and Safari render link underlines:
Chrome: https://i.imgur.com/ENDza7r.png
Safari: https://i.imgur.com/bK2k0BY.png

😍 👏 👌 👍

Comment 35

[5silentrain]

Attachment: Chrome 10.png

Comment 36

[5silentrain]

Attachment: Safari 10.png

Comment 37

[Jonathan Kew [:jfkthame]]

This happens because the <a> element that is generating the underline has font-size: 0.

Comment 38

[5silentrain]

Okay, but what worries me most is: are the developers planning to fix this bug? 🤔