Closed Bug 1157083 Opened 6 years ago Closed 6 years ago

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

Categories

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

enhancement
Not set
normal

Tracking

()

RESOLVED FIXED
mozilla40
Tracking Status
firefox40 --- fixed

People

(Reporter: masayuki, Assigned: masayuki)

References

(Depends on 1 open bug, )

Details

(Keywords: dev-doc-needed, site-compat)

Attachments

(2 files)

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
Closed: 6 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla40
Depends on: 1170480
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.