Styling acronym and abbr

Wednesday 11 February, 2004 ( 9:49AM GMT)

It has become a common practice to style acronym and abbr elements with a dotted underline (using the CSS border-bottom: 1px dotted). Even my browser has a default dotted underline style for these elements.

One of the changes I am thinking about making in the forthcoming redesign is to completely remove this styling for the reason that not only do I believe it is not very useful, I think it can be misleading.

Underlined elements, in whatever form, still speak to many "I am a link". It is my guess that more people will mistakenly believe this styling to be a link than people who understand it to signify an abbreviation.

It could be that it is simply a contrasting style to surrounding text that makes an element stand out as a link. Indeed, the underline is not as necessary as it once was and many sites now have non-underlined links which are differentiated from the rest of the non-linked text by a different colour.

My thoughts are to still use the elements (which was never any question), but to simply and solely apply the style of cursor: help so that when a user hovers over the abbreviation, it has the same effect as before. The problem, of course, is that there is nothing to suggest that there is any further information is there in the first place.

But is it the right thing to take away an attempted standardised style? The wholesale, widespread understanding of such a feature would be great, but while it faces such mighty competition for recognition from the attention-seeking link I can't see that happening.

Comments

Comment 1

abbr[title],acronym[title]{ cursor:help; }

So said Anne on Wednesday 11 February, 2004 at 11:25AM GMT.

Comment 2

No, don't bail out now!

If we all use the dotted underline now, then that becomes the de facto standard. The end user is not *that* stupid, eventually he will discover the significance of the dotted-underline and his browsing experience will be much more rewarding because of it.

The simple fact that the dotted-underline is becoming "normal" is reason enough to employ it, regardless of your own , personal tastes.

So said DarkBlue on Wednesday 11 February, 2004 at 1:10PM GMT.

Comment 3

Hmm... I dunno. My own personal taste is in favour of this method of styling. When I see this I think to myself "ah, an abbreviation... I can hover my cursor over it and find out what it means. But then most people don't know that. No, they're not that stupid and it won't take long to figure out but it's all about instant reactions to symbols. The more intuitive an interface is, the more usable it is.

So said Patrick on Wednesday 11 February, 2004 at 1:19PM GMT.

Comment 4

"The more intuitive an interface is, the more usable it is."

Absolutely true Patrick. The styled acronym is not intuitive I agree, but it is easily and quickly learned.

I suggest that the extra value of a defined acronym is considerable and, as observed above, an unstyled acronym is essentially worthless since the user doesn't appreciate that the extra information is available.

Stick with it, let's get the dotted-underline known to the wider public.

So said DarkBlue on Wednesday 11 February, 2004 at 1:39PM GMT.

Comment 5

I'm for the underline. Have you ever tried to click on text that was underlined but wasn't a link? If we go with the "abolish dashed underline for abbr and acronym", why don't we abolish the underline tag? Underlined text is confusing in a poorly designed site.

The abbr underline serves a different purpose than an a underline, and so it looks different. That's the UI trick. It is the cue to users saying "this is different from other underlined text you'll come across". The dashed underline is also good for people with color blindness and other related disabilities.

Also, how many of you use the spinning .gifs or burning fire icons? I'm guessing not many. Flashing and blinking is distracting. With so many banner ads and other distractions on the web, why would we want to turn the user's cursor into a distraction by turning it into a help cursor? You may say "but alt text could be classified as a distraction!" To that I say no because links already have alt text (or should have alt text) so the popup is expected behavior. A changing cursor on a link is not expected behavior, and well designed user interfaces do what the user expects.

Now you may say "The underlined link doesn't take them anywhere! That's not expected!" True enough, but also remember that the link is dashed, not solid. From this the user can infer that something is different, but they won't know what is different until they try to click the "link". We must follow the standard of dashed underline for abbr and acronym, so users will begin to make the distinction between solid underlines and dashed underlines.

Standards have to start somewhere.

So said Ryan on Wednesday 11 February, 2004 at 3:04PM GMT.

Comment 6

"A changing cursor on a link is not expected behavior"

Dunno what browser you're using Ryan, all the ones I use change the cursor to a pointing hand when it goes over a link.

I'm with the majority in favour of the dotted underline. If people *are* confused by it, they shouldn't be for long. If we all pick a different convention that seems right to us, the result really will be confusing. Just because it hasn't involved the W3C chewing over it for years doesn't mean it can't be a useful standard. After all, where does it say in the W3C spec "all web pages must have a logo in the top-left that names the site and links to the home page"...

So said Chris Hunt on Thursday 12 February, 2004 at 4:23PM GMT.

Comment 7

PTG, I can write a super script for you that will solve that whole hornet's nest of a problem for you.
Say you have this: <ACRONYM>CSS</ACRNOYM>
My script can make that appear as such:
CSS (Cascading Style Sheets)
Adding the extra bit would eliminate the need for titles, underlines etc, and my script does it for. I can make it very backwards compatible and fast. Email me (pianoman@reno.com) if you are interested!

So said Dante Evans on Sunday 15 February, 2004 at 4:01AM GMT.

Comment 8

Accessify.com's Acrobot
http://www.accessify.com/tools-and-wizards/acrobot/basic.asp
can automatically generate code from submitted text using its listings of acronyms and abbreviations.

So said Aaron on Thursday 19 February, 2004 at 9:57PM GMT.

Comment 9

" why don't we abolish the underline tag?"

We have. It's quite deprecated.

So said Neal on Saturday 21 February, 2004 at 8:26PM GMT.

If PTG doesn't like dotted underlines, then PTG should see only a cursor:help,

But PTG shouldn't decide what STK sees..

So said STK on Saturday 26 March, 2005 at 12:00PM GMT.

Comment 13

abbr[title],acronym[title]{ cursor:help; }

So said Bernd on Monday 10 October, 2005 at 1:47AM GMT.

Comment 14

@STK
>But PTG shouldn't decide what STK sees.
The whole point of CSS is that the designer decides how the site is viewed. If you want to see something different, edit a user stylesheet.

So said Tom on Friday 23 December, 2005 at 3:34PM GMT.