Abbreviations
There are two HTML elements for dealing with abbreviations: <acronym> and <abbr>.
So what's the difference? Although it is generally agreed that any shortening of a word or phrase is an abbreviation, and that some abbreviations are acronyms, there are two schools of thought on deciding exactly which abbreviations are acronyms:
- You pronounce acronyms as words instead of spelling them out. For example, the following are acronyms: radar, UNICEF; the following are not acronyms: UK, FTP. There are of course borderline words which some people spell out and others pronounce as words, such as URL.
- Acronyms are formed by taking the initial letter or letters from a group of words. For example, the following are acronyms: radar, UNICEF, UK, FTP; and the following are not acronyms: Dr, abbr.
So there is a lot of confusion about which abbreviations are acronyms. For this reason, it is safest to always use <abbr>. Indeed, <acronym> is being removed from future versions of (X)HTML.
Problem
Internet Explorer doesn't support <abbr>. It can't style it with CSS, it doesn't display the title in a tooltip when the mouse hovers over them and it doesn't even add the relevent nodes to the DOM tree. Yet it supports <acronym> just fine.
This may seem strange — after all, all that needs to be done is for Internet Explorer to handle them both (more or less) the same! However, due to a historical dispute with Netscape, Microsoft have deliberately ommitted support for <abbr>.
<span> to the rescue!
Despite completely ignoring <abbr>, Internet Explorer can be coaxed into the appearance of treating it properly using a little hackery involving <span>. For example:
<style type="text/css">
abbr { border-bottom: none; }
.abbr { border-bottom: thin dotted black; }
</style>
<p><span class="abbr" title="United Nations"><abbr
title="United Nations">UN</abbr></span></p>
However this involves quite a bit of duplication, especially on an abbreviation-heavy page, so is hardly ideal.
JScript to the rescue!
Instead of manually adding all those <span> tags, Marek Prokop recommends using a little JScript:
function styleAbbr() {
var oldBodyText, newBodyText, reg
if (isIE) {
oldBodyText = document.body.innerHTML;
reg = /<ABBR([^>]*)>([^<]*)<\/ABBR>/g;
newBodyText = oldBodyText.replace(reg,
'<ABBR $1><SPAN class=\"abbr\" $1>$2</SPAN></ABBR>');
document.body.innerHTML = newBodyText;
}
}
window.onload = function(){
styleAbbr()
};
isIE = (document.all) ? true:false;It should be pretty obvious how this works, but Marek explains it all.
Conditional comments to the rescue!
Now we have an almost perfect solution, but we can go a step better in my opinion. Currently, good browsers that support <abbr>, such as Netscape, Mozilla and Opera, will have to download and execute the JScript above. Because of the if (isIE) condition, execution will be minimal, but it's still better to hide the script from them altogether.
To do this, we can use the misguided magic of conditional comments. Firstly create a file called "abbr.js" (or whatever) containing the code from the section above and then link to it like:
<!--[if IE]><script type="text/javascript" src="abbr.js"></script><![endif]-->Most browsers will ignore that entire block as it is a comment. Internet Explorer 5+ will think it's special and will download and run the JScript.
This last technique is what I use on this web page.
References
- Marek Prokop: Styling <abbr> in IE.
- Jukka Korpela: Explaining abbreviations, acronyms and symbols on Web pages.
- W3C HTML 4.01 Recommendation: ABBR, ACRONYM.
- Craig Saila: HTML is not an Acronym.
- Microsoft: About Conditional Comments.