Make WordPress Core

Opened 5 years ago

Closed 3 years ago

#15700 closed enhancement (wontfix)

Replace underline with border-bottom in hyperlinks, for legibility

Reported by: demetris Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.1
Component: UI Keywords: ui-feedback
Focuses: Cc:


At present, hyperlinks in the dashboard are underlined with text-decoration:underline, which is also what most browsers use as a default.

This is not ideal for legibility, because the underlining is very close to the font baseline and cuts through the descenders. It is also a problem that may be pronounced more in some languages than in others.

For example, in English only 5 of the 26 letters have descenders:

g j p q y

In Greek, on the other hand, 10 of the 24 letters have them:

β γ ζ η μ ξ ρ φ χ ψ

A simple solution for better legibility is to turn underlining off and use a solid bottom border instead. This stays true to the convention and expectation of underlined hyperlinks, while giving the anchor text room to breath. In addition, the bottom border can be styled in several ways, to be as discreet or as pronounced as needed. (See attached image for basic examples.)

Overall, it is an easy change that could be made once we start developing 3.2.

What do you think?

Attachments (1)

t15700-hyperlink-underlining.png (20.5 KB) - added by demetris 5 years ago.
Basic examples of alternative to text-decoration:underline for hyperlinks

Download all attachments as: .zip

Change History (6)

5 years ago

Basic examples of alternative to text-decoration:underline for hyperlinks

#1 @nacin
5 years ago

  • Keywords ui-feedback added; ux-feedback dev-feedback removed

#2 @saracannon
5 years ago

  • Cc sararcannon@… added

I've always been a big advocate of border-bottom rather than underline and it makes sense in this setting as noted with the language translation/descenders. I think it would be worth looking into..

However, in my observation, most of the links on the "dashboard" are blue with orange on hover.(no underline) When you get into an edit-post page, some of the links in the little modular boxes (I'm not sure the proper term for these things) have the underline you are referring to as well as being blue and orange on hover. (and in other random places as well.. log-in screen, etc) But in general, most do not underline.

Probably the most proper way to go about this is to determine if we want all links to be consistent or determine if there is a reason that some links get an underline and some don't... and if there is no reason.. bring up the possibility of just consistently not underlining any of them. (I'd moreso just push for that no-underline-at-all option) Hopefully we will discuss this more in the UI group. thanks!

#3 @JohnONolan
5 years ago

I've seen and experienced a huge amount of display issues and cross browser bugs in rendering for border-bottom when applied to standard (inline) links. In theory I agree with this approach and the reasons for implementing it, but in practice I don't trust it to be consistent enough for WP.

I would be against removing link underlines completely - I think the underlined link is one of the most recogniseable features of web usability in general. Someone who's only used the web for 2 days knows what a coloured and underlined bit of text does.

Overall I think this could create more problems than it solves and I don't think it's catering to the majority of users. On that basis I would suggest a plugin admin skin for users who speak a language where this is an issue.

#4 @nacin
5 years ago

I'd tend to agree with John on this. The semantic way of decorating a link is with an underline. I've never liked border-bottom, and would rather blame the browsers for not adjusting the underline when the document language requires it for the number of descenders.

Perhaps that seems like I'm shifting blame, but I mean, underlining is clearly the proper way to do this in the semantic web sense.

I also really don't want to need to manage this in the future. It's a pain to get this right across all links, and we're bound to be inconsistent.

#5 @nacin
3 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from new to closed

We don't currently use underlines in the dashboard, so closing this.

Note: See TracTickets for help on using tickets.