5 August 2007 @ 3pm

CSS & XHTML, tutorials

An Easy Way to Deal With Smallcaps

This might not be a problem you deal with. But it comes up for me every once in a while, and I thought I’d share how I deal with it. Sadly, IE doesn’t handle this 100% correctly (shocker), but if they keep up browser development, hopefully they’ll get this soon. Anyway, it degrades nicely for IE users.

Acronyms and abbreviations often need to be set apart typographically. Ideally, with small-caps.

There are a few ways you could deal with them. For example …

All-Caps, Written in the Code Itself

<p>I love XHTML and CSS.</p>I love XHTML and CSS.

The upside to that is that it’s a lot simpler to implement, there’s no real question about the caps / lowercase question, and if your copy were to be copied-and-pasted, the uppercase letters would be transmitted. The obvious downside: you’ve abandoned small-caps altogether.

So let’s try something else.

Small-Caps, Applied Via and CSS

<p>I love <abbr>xhtml</abbr> and <abbr>css</abbr>.</p>abbr {font-variant: small-caps;}I love xhtml and css.

A couple of problems here. Visually, the small-caps is nice. But the code, as you can see, is in lowercase. Screen readers are going to see it as lowercase words, rather than the spelled-out, capitalized acronyms they are.

You can’t simply apply small-caps to capitalized letters, since the browser will simply render them as uppercase letters. Check it out: Here are two “x”s, both with small-caps applied: Xx. The first of those was a capitalized “X,” the second was a lowercase “x.” So you can’t apply small-caps to capitalized letters — you’ll lose the small-caps effect for the vast majority of your readers.

What if you could render capitalized letters in lower-case, and then small-caps-ify them? Ahhh.

Once again, CSS to the rescue. We’ll just change the XHTML by capitalizing the acronyms, and we’ll add a new declaration to the CSS.

Small-Caps on All-Caps Letters, Applied Via and CSS

<p>I love <abbr><span class="new">XHTML</span></abbr> and <abbr><span class="new">CSS</span></abbr>.</p>abbr {font-variant: small-caps;text-transform: lowercase;}I love XHTML and CSS.

So. There we have it. When the browser renders the code, it’ll turn the all-caps letters into lowercase letters, and will then apply the small-caps font-variant to them. (Actually, I think it technically small-caps-es them and then lowercase-s them, but the end result is the same.)

One more thing to note: There will probably be times that you want to render small-caps even when you’re not dealing with abbreviations (for example, in the title of this post). You can do one of two things for those. You can either figure they’re a rare enough occasion that you’ll just use inline styles to alter them, or you can simply alter your external stylesheet like this:

abbr, .smallcaps {font-variant: small-caps;text-transform: lowercase;}

In case you missed it, I just added “.smallcaps” before the bracket (and, of course, I added the comma after “abbr” as well).

Purists will note that we’re using poor form there, using the intended output (small-caps) as a descriptor for the code (the class’s name is “smallcaps”). I don’t think, in this case, that’s the end of the world. If you take umbrage with it, though, you could use a different class name, like “acronym” or something like that. But, honestly, think about your in situ usage.

When I used it in the header of this article, it wasn’t an “acronym” … all I wanted to convey was “put this in small-caps.” So a class name of “smallcaps” works for me.

I noted at the beginning that this degraded nicely in IE. What IE users will see is simply the all-caps versions of the abbreviations. That is, IE doesn’t lowercase the letters before (or after) small-caps-ing them. I hope that future releases of IE will enable text-transform, but this technique still works in the meantime.

No Comments Yet

There are no comments yet. You could be the first!

Leave a Comment

Stuff in limbo