Friday Feast #64: Abbreviations, Acronyms, and Shortened Words

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 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
  • 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.


  • 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:

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

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.

08:01 pm, pst 2 January, 2004 Comments, Trackbacks (12) ·';}?>

Categories: CSS, Design, Development, Friday Feast, Movable Type, Standards


Comments, Trackbacks: 12 so far. Add yours!

  1. Shirl, I’ll be happy to give this Opera DOM issue of yours some personal TLC over the weeknd, if you drop me an e-mail or an IM...

    Happy New Year...

    11:50 pm, pst 2 January, 2004Comment by ben

    comment #1 permalink ·'; else echo '·'; ?>

  2. An e-mail is on the way... Thanks, Ben!

    11:58 pm, pst 2 January, 2004Comment by Shirley Kaiser

    comment #2 permalink ·'; else echo '·'; ?>

  3. Very interesting topic as always! Out of interest when hovering over certain words I get a '?' is that due to you using the correct markup?

    06:15 am, pst 3 January, 2004Comment by Sian

    comment #3 permalink ·'; else echo '·'; ?>

  4. Shirley Kaiser has a healthy roundup of tutorials, comments, examples, information, charts, ideas, and tools in regards to Abbreviations, Acronyms,...

    03 Jan, 2004Trackback from webgraphics

    trackback #4 permalink ·'; else echo '·'; ?>

  5. Shirley Kaiser has a healthy roundup of tutorials, comments, examples, information, charts, ideas, and tools in regardsAbbreviations, Acronyms, and Shortened Words. A very usefule collection of links indeed....

    03 Jan, 2004Trackback from Blog-Fu

    trackback #5 permalink ·'; else echo '·'; ?>

  6. Shirley Kaiser's Brainstorms and Raves Friday Feast of useful info and links is back for the new year with helpful links to tutorials, comments, examples, information, charts, and tools related to abbreviations, acronyms, and initialisms. I've always w...

    03 Jan, 2004Trackback from dwh!{dezwozhere:blog}

    trackback #6 permalink ·'; else echo '·'; ?>

  7. Only does acronyms (I wrote it when I was young and foolish) but many people find it useful nonetheless:

    PHP Acronym Definer

    Its claims to fame is if you already have an acronym tag there it doesn’t add it, and it doesn’t put acronyms inside of attributes.

    12:14 am, pst 4 January, 2004Comment by Matt

    comment #7 permalink ·'; else echo '·'; ?>

  8. Is there any chance you could link to your macros file? Maybe comparing yours to Mark’s will let me work out what parts I should remove (unfortunately I’m Perl-impaired ;-) It’d also be good to copy n paste any more useful acronyms from your list. Thanks in advance!

    PS great content!

    07:37 am, pst 7 January, 2004Comment by oli

    comment #8 permalink ·'; else echo '·'; ?>

  9. I posted a separate text file of the acronyms, abbreviations for you that I’m using at this site as of today. Acronyms and abbreviations are highly personal and site-specific, so I’m not sure what I’ve added to Mark Pilgrim’s list you’d be interested in, but here ya go:

    Brainstorms and Raves Abbreviations, Acronyms Macros List

    I don’t use the smiley graphics that Mark Pilgrim’s script includes, so you won’t find references to them in my macros list file. Also, this is NOT my entire macros file. I only included the abbreviations and acronyms macros in this text file (I have other macros in my macros file, but they’re not related to this.)

    For a great listing of abbreviations and acronyms, I highly recommend the abbreviations and acronyms list at that I mentioned in the original post above.

    02:35 pm, pst 7 January, 2004Comment by Shirley Kaiser

    comment #9 permalink ·'; else echo '·'; ?>

  10. My solution to the Opera problem is to use not only document.all in the DOM sniff but document.all && document.bgColor—the latter is returned false by Opera but true for IE. I find this odd because my Color Picker script uses the method document.bgColor and works fine on Opera 7 (but not Opera 6).

    I have used a version of the script on my site for several months now. I also added to the script to make the Q element work on IE as well, even rendering curly quotation marks! But the script is so long and crufty that it causes images to reload, making the screen flicker in some cases. I may soon relent and remove the Q elements, replacing them with manual curly quotation marks.

    08:34 am, pst 9 January, 2004Comment by Charlie Petitt

    comment #10 permalink ·'; else echo '·'; ?>

  11. To hell with Internet Explorer. I’m using abbr on my site now.

    11:24 pm, pst13 January, 2004Comment by Mike Steinbaugh

    comment #11 permalink ·'; else echo '·'; ?>

  12. Jacques Distler has a patch for the MT-Acronym plug-in which allows the <abbr> tag to be auto-generated from the content just as with Acronyms. It uses a second text file abbr.db to the system which is a simple pair matching of abbreviation and expansion. Really nice, and keeps the hacks and definitions out of the content itself.

    08:38 am, pst30 January, 2004anonymous comment

    comment #12 permalink ·'; else echo '·'; ?>

This discussion has been closed. Thanks to all who participated.

*/ ?>