1157083 - It might be better to use CSS3 text-decoration for the UA stylesheet of <abbr> and <acronym> rather than border-bottom

Status: RESOLVED FIXED

(Core :: Layout: Block and Inline, enhancement)

Description

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)(sickish, maybe slower respose)]

Currently, our UA stylesheet uses border-bottom for styling <abbr> and <acronym>. However, it may be ugly (especially with Meiryo), see bug 1157076.

We can fix this issue with using CSS 3 text-decoration. However, Blink hasn't implemented CSS 3 text-decoration yet and they also use border-bottom (i.e., they have this bug too). (FYI: IE 11 doesn't append any style to <abbr>)

So, changing style might cause some compatibility issue with Blink but it might be worthwhile to change our UA style.

Any ideas?

Comment 1

[Boris Zbarsky [:bzbarsky]]

Fwiw, the HTML spec says this UA style should be:

  abbr[title], acronym[title] { text-decoration: dotted underline; }

Comment 2

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)(sickish, maybe slower respose)]

(In reply to Not doing reviews right now from comment #1)
> Fwiw, the HTML spec says this UA style should be:
> 
>   abbr[title], acronym[title] { text-decoration: dotted underline; }

Wow, sounds great!

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Now that we have text-decoration-style, we should use it.  This is what text-decorations are intended for.  If text-decoration produces worse results for underlines than borders do, we should find a way to fix text-decoration.

Comment 4

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)(sickish, maybe slower respose)]

Okay, taking it.

Comment 5

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)(sickish, maybe slower respose)]

Attachment: Patch

Comment 6

[Pulsebot]

https://hg.mozilla.org/integration/mozilla-inbound/rev/b1eaa4e7dad8

Comment 7

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/b1eaa4e7dad8

Comment 8

[Chris Rebert]

This change is causing double underlines on sites using Bootstrap.
See https://github.com/twbs/bootstrap/issues/16574#issuecomment-108252698

Comment 9

[Kohei]

This has already been documented:
https://developer.mozilla.org/en-US/Firefox/Releases/40/Site_Compatibility#CSS

Comment 10

[titoferdian23]

Attachment: stickersheet_uielements.ai