On styling acronyms and abbreviations

Posted by admin on Monday, November 20th, 2006 at 2:27 pm in accessibility, code, css, html, semantic markup. No comments.

I always use the same basic styling on acronyms and abbreviations: small-caps, slightly increased letter-spacing, some sort of low-contrast border on the bottom and the ‘help’ mouse pointer. Until recently I only marked up the first occurrence of an acronym in a document until I realised I should really mark up every occurrence—if only because my styled version looks prettier than normal upper-case letters.

Still, I only need to explain the term on the first occurrence, right? I started omitting the title-attribute in subsequent uses. But then I found the styling of these unexplained acronyms to be misleading—the help-pointer and the bottom border indicate that there’s a explanation available. So I decided to remove this styling from acronym without the title-attribute.

I do this using CSS attribute selectors, like so:

acronym {
  text-transform: lowercase;
  font-variant: small-caps;
  letter-spacing: 0.1em;
}
acronym[title] {
  border-bottom: 1px dotted #ccc;
  cursor: help;
}

The good thing is that it’s neat. The bad thing is that IE (both 6 and 7) cannot handle most of the above. That’s too bad, but not a big problem—that’s what they call progressive enhancement.