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

RESOLVED FIXED in Firefox 40

Status

()

enhancement
RESOLVED FIXED
4 years ago
3 years ago

People

(Reporter: masayuki, Assigned: masayuki)

Tracking

(Depends on 1 bug, {dev-doc-needed, site-compat})

Trunk
mozilla40
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox40 fixed)

Details

(URL)

Attachments

(2 attachments)

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?
Flags: needinfo?(dbaron)
Fwiw, the HTML spec says this UA style should be:

  abbr[title], acronym[title] { text-decoration: dotted underline; }
(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!
Summary: It might be better to use CSS text-decoration for the UA stylesheet of <abbr> and <acronym> rather than border-bottom → It might be better to use CSS3 text-decoration for the UA stylesheet of <abbr> and <acronym> rather than border-bottom
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.
Flags: needinfo?(dbaron)
Okay, taking it.
Assignee: nobody → masayuki
Attachment #8595820 - Flags: review?(dbaron) → review+
https://hg.mozilla.org/mozilla-central/rev/b1eaa4e7dad8
Status: ASSIGNED → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla40

Updated

4 years ago
Depends on: 1170480

Comment 8

4 years ago
This change is causing double underlines on sites using Bootstrap.
See https://github.com/twbs/bootstrap/issues/16574#issuecomment-108252698
You need to log in before you can comment on or make changes to this bug.