Anne van Kesteren

Improved styling abbr in IE

I "improved" the Javascript function that is used for styling abbr in IE. I haven't changed it on this site yet but I think I will, since it's quite useful if you want to user more attributes than just the title attribute. For a Dutch website I had to use an English abbreviation so I need 'it to use the xml:lang attribute. I did, but then the function styleAbbr() doesn't work anymore. This is mine:

function abbrToSpan(){
 var newSourceCode;
    newSourceCode           = document.body.innerHTML;
    newSourceCode           = newSourceCode.replace('<ABBR','<SPAN class="abbr"');
    newSourceCode           = newSourceCode.replace('</ABBR>','</SPAN>');
    document.body.innerHTML = newSourceCode;

window.onload = function(){
 /* other onloads */

isIE = (document.all) ? true:false;

As you can see I do not use a regular expression, but just a simple find and replace, which in this situation works like intented. Resources: Styling <abbr> in IE.


  1. Well Anne, this is very handy.

    You don't mind if I steal this one :))?

    Posted by Minz Meyer at

  2. It's open source, like all JavaScript (I'm excluding server-side JavaScript here). I already sent an e-mail to the original author, but he hasn't replied yet.

    Posted by Anne at

  3. I find the original method (inserting span with JavaScript) rather puzzling. If you are going to use scripting to do this, why not just serve up abbr as acronym to IE browsers? You can still apply a aurally-styled class attribute to ensure abbreviations are spelled out by screen readers, a visual users won't care anyway. Doing it this way saves having to put in a meaningless span element.

    Posted by Simon Jessey at

  4. well they are two different things the abbr and the acronym, so mixing those as a workaround for IE is not an option (at least i think ;))

    Posted by Folkert at

  5. abbr and acronym are indeed different, from a semantic point of view. Acronyms are a subset of abbreviations. Since Internet Explorer lacks support for abbr (and this comes from a misunderstanding of what abbreviations and acronyms are), the logical solution is simply to serve IE users with the semantically-incorrect alternative.

    There is some good news. Assuming that most browsers will eventually support XHTML 2.0, it must follow that Internet Explorer will eventually support abbr, since acronym does not feature in the specification.

    Posted by Simon Jessey at

  6. I think I stick to span, 'cause it's in my opinion more semantically correct in conjunction with the class attribute, which adds semantic value to the span element.

    Posted by Anne at

  7. I can see your point of view, Anne, but I must disagree, for the same reasons that I don't like the multi-SPANNED approach to the CSS Zen Garden. Adding elements as style hooks seems to be contrary to the goal of separating content from presentation. Even the use of class attributes should be minimized.

    In this particular case, the span element ONLY has semantic value when associated with an explanatory class attribute. It has no semantic value on its own.

    Posted by Simon Jessey at