CSS Sprite Fonts

The idea of CSS sprites is to take a quilt-like image and position it using CSS so that only certain patches of the quilt are visible. It's handy for saving on load time and avoids the use of scripting to preload image rollovers. So how about a quilt made out of letters and numbers? Sounds like a lot of fun Mike. Make it happen!

CSS sprite fonts allow you to line up those quilt patches in such a way that you can create words or strings of random, meaningless characters. These words and strings will be readable to you and I, but computers won't be able to make heads or tails of the CSS that creates the effect. Instead of rambling on about these alleged fonts, why not get into the meat: how the hell these things work.

Sprite Fonts In Action

Each character will be represented in the HTML like so:

<div class="char" style="background-position: -50px 0"></div>

Each div will have a background of the alphabet applied to it, but will only show one character based on the background-position. In this case, I'm using a fixed 10px-width font with a blank leader space, so 50px corresponds with the fifth letter of the alphabet, in this case E. Let's go to the CSS:

1. div.char {
2. float: left;
3. height: 16px;
4. width: 10px;
5. overflow: hidden;
6. margin: 0;
7. padding: 0;
8. background: url(http://squarehappy.com/images/emailchars.gif) no-repeat;
9. }

It would kick ass if we could use inline elements instead of blocks for each letter, so as to avoid the whole floating messyness, but we need to define its dimensions so inline elements are out. Here's emailchars.gif if you're having difficulty visualizing what's going on here.

Here is an example where I'm using sprite fonts to protect my inbox. I will now construct my email address and I defy any harvester to reap it.

CAPTCHAs: Protecting Your Forms

Sprite fonts could also be utilized to protect forms from bots and harvesters. CSS and HTML can construct the meaningless jumble of letters and numbers that compose the CAPTCHA, with a bit of server-side programming thrown in, because what the hell else were you processing those forms with?

The sprite font's main weakness is the presence of the background-position in the HTML. A bot could plot the positions and construct the alphabet, or find a common denominator amongst them. So using only one font or fixed-width fonts could be easily defeated, but a combination of randomized, variable-width fonts seems pretty undefeatable to me. Prove me otherwise, because I plan on implementing it on this site and I want to know if I'm wasting my time.

Sprite fonts as CAPTCHAs may deride some security from being new and unknown, and may ultimately hit a brick wall if they garner any attention. However, image-based CAPTCHAs, in all their distorted glory, are not invulnerable. They're subject to the same better mousetrap/bigger mouse race, the bigger mouse being the ever more advanced OCR scanners available.

Closing

CSS sprite fonts can protect your email address or your forms, sure, but they have plenty of creative potential as well. You could use them for those big, fancy leader letters they put at the beginning of magazine articles. You could create a font for a ransom note. Stuck using the standard fonts that come on every computer to design your webpage? Construct entire essays with CSS sprite fonts! (Don't actually do that.) I'm sure you can think of a whole host of ideas I'll never come up with. All right, article over.