I used over 50 acronyms and abbreviations on this weblog last month: ADA, ALT, AOL, API, CGI, CMS, CSS, CTRL, DMV, DNS, DTD, EFF, FAQ, FSF, GFDL, GIA, GPL, HTML, IE, IIRC, IIS, IO, KB, KDE, LONGDESC, MB, MSDN, MSN, MT, Mac, NC, OPML, P2P, PGDN, PGUP, PBS, PDF, PONUR, RSS, RU, SOAP, SSN, TDD, US, VNC, W3C, WCAG, WYSIWYG, Win, XHTML, and XML.

If you recognize all of them, congratulations; you have a long and prosperous future as a technical editor. If not, you’ll appreciate the fact that I defined each of them with the <acronym> tag. Hover your cursor over each acronym to see what it stands for. This works in all modern browsers, and is harmless in Netscape 4.

You should define an acronym whenever you use it, or at least once per post.

Who benefits?

  1. Michael benefits. When Michael hovers his cursor over an acronym, Opera displays the acronym title as a tooltip.
  2. Bill benefits. Mozilla goes even further, automatically rendering acronyms with a dotted underline. When Bill hovers his cursor over the acronym, Mozilla changes the cursor to a cursor + question mark, and then displays the acronym title as a tooltip. (You can override this default behavior with cascading style sheets, or use CSS to get a similar effect in other browsers.)
  3. Google benefits. Google indexes the acronym title as well as the acronym itself, so people can find your site whether they search for the acronym or the spelled-out description.
  4. I wish I could say that Jackie benefits, but she doesn’t. Neither JAWS nor any of the other screen readers on the market currently support reading the titles of acronyms. I hope some day they will, and then you’ll be ahead of the game.

How to do it

The first time you use an acronym, mark it up with an <acronym> tag, like this:

<acronym title="cascading style sheets">CSS</acronym>

Radio users can automate this markup by using shortcuts. From your Radio home page, click “Shortcuts” in the main navigation menu, then define the acronyms you use frequently. For example:

Name: CSS

Value: <acronym title="cascading style sheets">CSS</acronym>

(Be sure to change the input type from “WYSIWYG” to “Source” so you can type the HTML directly.)

Then, in your post, simply type “CSS” (with the quotes), and Radio will render it with the acronym tag and the title, just as you defined it.

How to do it: cascading style sheets

As an added bonus, you can change the look of all your acronyms using cascading style sheets. This works in all tools, not just Radio. Here is the rule I use to produce the dotted underline in all browsers (not just Mozilla):

acronym {
  border-bottom: 1px dotted black;
}

And as an extra bonus, this is the rule I use in my print stylesheet to automatically spell out acronyms when printing my web pages. (This only works when printing from Mozilla and Opera, but it’s harmless in other browsers.)

acronym:after {
  content: " (" attr(title) ")";
}

Further reading

Have you been using acronyms without knowing what they mean? Look them up.

Postscript

Several fellow markup-obsessed webloggers have correctly pointed out that there is an <abbr> tag for abbreviations. Unfortunately, no version of Internet Explorer for Windows supports it; no tooltips show up at all. Use <acronym>.

§

Respond privately

I am no longer accepting public comments on this post, but you can use this form to contact me privately. (Your message will not be published.)



§

firehose ‧ code ‧ planet

© 2001–9 Mark Pilgrim