skip to navigation

Friday Feast #64: Abbreviations, Acronyms, and Shortened Words
08:01 PM - Jan 2, 2004

First, I wish everyone a happy, healthy, prosperous, and memorable 2004!

I’ve noticed that a growing number of websites are providing tooltips and styles for abbreviations and acronyms within content. Later versions of browsers support the <abbr> and <acronym> elements, with the exception of Internet Explorer unfortunately not recognizing the <abbr> element. Today’s Friday Feast provides some helpful links to tutorials, comments, examples, information, charts, and tools related to abbreviations, acronyms, and initialisms.

Before I list the links and information, let me first comment that I’ll let you decide about acronym vs. abbreviation and what you ought to do. In addition to many folks just needing to be clear about the difference between an acronym and an abbreviation, if Internet Explorer supported the <abbr> element perhaps many developers, including myself, wouldn’t have at least initially resorted to using the <acronym> element even though we should have used the <abbr> element. Yes, you may hear me grumbling in the background as you’re reading this. Well, see a couple of browser-sniffing JavaScript solutions for IE below that serve something different just for IE so those users see the underlining and tooltip just like other browsers that already support the <abbr> element. I’ve implemented one of the JavaScript solutions below at my business site at least temporarily, but there seems to be an Opera bug with document.body.innerHTML, so I may pull the plug on that particular JavaScript solution. See the thread at css-discuss, Calling all Opera gurus... for information on that. As I write this, you can also visit my business site with Opera to see this quirk, at least for the moment until I pull the plug. The approach you choose to use or not use ought to depend on the browsers users visit your sites with, of course.

• Abbreviations, Acronyms, Initialisms
  A discussion of each with definitions, explanation of differences, and why they matter with markup. Also included are markup examples, references, W3C references, and more. Very helpful information and resources by Lars Holst.
• Explaining abbreviations, acronyms and symbols on Web pages
  Helpful information about how to handle, write, and use abbreviations, acronyms and symbols. Practical, concise, and helpful information here by Jukka Korpela.
• HTML is not an acronym...
  Another must-read article about the differences between abbreviations and acronyms and markup examples, including CSS. By Craig Saila for evolt.org. See also more at his site, HTML is not an acronym....
• Master Text
  Helpful tutorial with examples and information about formatting abbreviations, acronyms, and other elements. At htmldog.com.
• Styling <abbr> in IE
  A JavaScript solution for serving the <abbr> tooltip to Internet Explorer users. I’ve tried this script in limited testing with IE6 (PC) and it works well. By Marek Prokop.
• Improved styling <abbr> in IE
  This JavaScript solution is similar to the above but allows for more attributes than just the title attribute. By Anne van Kesteren.

Tools

• Acrobot
  A fantastic tool at Accessify where you can input your text and get the abbreviation or acronym markup in a variety of formats or just the abbreviation or acronym information. There’s also now an Acrobot favelet, and you can view a helpful abbreviations/acronyms chart or download the entire comma-separated (.csv) database file. You’ll also find helpful explanations and information about acronyms, abbreviations, and related markup.

For Movable Type

Movable Type users can automate the inclusion of acronyms with a variety of plugins. For example, I’ve used the following to automatically add the acronyms at this site:

• Brad Choate’s MTMacros plugin
• Brad Choate’s MTPerlscript plugin
• Mark Pilgrim’s instructions and acronyms list, to which I’ve added more of my own.

An alternative to the above is Henrik Gemal’s Acronym plugin.

Note that the two approaches above implement both acronyms and abbreviations with the <acronym> element. The approach above that I’ve used doesn’t make the changes to the database, meaning the content isn’t permanently altered, which can make it easier to add the <abbr> element at some point. I don’t know how Gemal’s plugin works, though, so I don’t know if it’s similar or not to Mark Pilgrim’s approach.

W3C Recommendations

• WAI Guidelines: Acronyms and Abbreviations
• WAI Guidelines HTML Techniques: Acronyms and Abbreviations

See also my comments about browsers, Movable Type, and more at the bottom of Rodent Regatta’s post, Still Learning.

Jan. 3, 2004 Update

See Saturday’s post and comments at Mezzoblue, acronym vs. abbr. Jacques Distler has also created an acronym patch for Henrik Gemal’s MT acronym plugin that provides improved handling of both abbreviations and acronyms. Nice! See also Jacques' informative post, <abbr>, <acronym>, Accessibility & Automation.

At least as of this moment, I’m inclined to agree that 1. a CMS solution such as what I’m doing with Movable Type and 2. the JavaScript 'hacks' above for IE seem like a reasonable way to go to cover browsers and keep the markup and content as clean and lean as possible. It’s certainly a pain when the most commonly used browser doesn’t support the <abbr> element. At any rate, it’s important to consider an approach that will work today and also be future-proof.

top