What do you get the blog that has everything? How about a garish, over-the-top and visually-unsettling font? Here's one that marshals the creative flair of photography enthusiasts from across the world. The result is a constantly-evolving typography with a capacity for surprise and novelty that is second only to its ability nauseate and confound. Read on for a demo, how-to and blow-by-blow account of my implementation of FlickrFont.

As you can probably guess, the idea is to take arbitrary text and convert it on-the-fly into a set of image "tiles", where each tile is a thumbnail image of a character lifted from the photo-sharing site Flickr. Why do this? Because it's a very geeky hack. (As an aside, I first saw this - done tastefully! - at Ideant blog, whose Ulises Ali Mejias' pithily described FreshTags blog navigation as 'real-time' interest-sensitive navigation for the readers of your blog. Nice!)

Yesterday, I was in serious danger of working on my PhD thesis so in desperation I looked into this whole Flickr web2.0 tag asynchronous feed business. Some googling on "Flickr Font" turned up a few sites, including some Perl scripts and the like, so I decided to proceed with a pure client-side implementation based on JSON feeds. No proxies, server-side code or XML involved.

Just to be absolutely clear: if you are at all interested in usability, are aesthetically-inclined, concerned with performance, enjoy technical elegance or even just possess a delicate sensibility then this is certainly not for you. Consider yourself warned.

To use FlickrFont at its most basic static level, simply enter the text you're interested in and it will convert it into a block of HTML img tags that you can cut and paste into any webpage or template. Ideal for headings where you want to give it that cut-from-magazines effect, like in a ransom note.

You can also use FlickrFont dynamically. This means that a new set of letters, digits and punctuation appears each time a reader loads the page. To do this, you must include some JavaScript in your page or template header. Then, you set class="FlickrFont" in any elements you wish to Flickrfy. For example:

<h2 class="FlickrFont">This is a Flickrfied Heading!</h2>

<p class="FlickrFont">Why would anyone want to do this?</p>

The text extraction is very naive, so it's probably best to stick to very basic HTML such as list and table elements. The third, and most clunky, method is to use a function call. You pass the string to get the Flickr treatment and the name of the variable to dump the resulting HTML into.

<script type="text/javascript">
FlickrFontString("How quickly daft jumping zebras vex.", "strPangram");
// code to wait on and handle strPangram
</script type="text/javascript">

The demo page provided also lets you set the size and style of the tiles, to breathe life into your very own monstrous FrankenFont.

Behind the scenes, the script works by grabbing all the strings with class="FlickrFont", concatenating them, knocking out the redundant and "too-hard" characters (see below) and building a font object. This is done by repeatedly (and asynchronously) hitting the Flickr servers for a list of suitable images. It then picks a random image from the ten it gets back and swaps the characters for the image tiles.

Here's a brief technical tip for other coders. The Flickr feed service will work with "&format=json", even though it's not documented. Also, the tag concatenation operator is "," and while it is described as returning a disjunction (find images with any of these tags) it's actually a conjunction (find images with all of these tags).

Scope: This implementation handles the entire Roman alphabet (all upper case), Arabic digits (0-9) and space. It also does punctuation marks that occur commonly enough to be found on the Flickr punctuation pool. At present, this is exclamation, at, dollar, percent, ampersand, hyphen, equals, slash, colon, semicolon, quote, apostrophe, comma, period and question marks. Adding others (such as tilda, asterix, underscore etc) is a simple matter of adding the symbol and its name to an array in your code. Easy peasy. The same method would work for other typographic variations, such as umlauten and other diacritical marks.

Performance: Since this is hitting up the Flickr servers (now part of Yahoo!), there is no loading on anyone else's machines or bandwidth. That said, please think about your poor readership who may be accessing your page on a hand-held mobile device. Yahoo! does advise of a rate-limiting policy, but I've not been affected by it despite vigorous testing ... including a few unfortunate incidents where I Flickerfied text that had already been Flickerfied ... yes, the whole HTML (<img src = blah) actually got turned into image tiles ... *shudder*.

Limitations: Damn thing won't work with Internet Explorer. Turns out the object literal handed back by Flickr (the JSON object) that's wrapped in the callback function won't get parsed by the IE browser. Specifically, it's fine with the heading info but chokes on the nested item list containing each result. Since I can't control the Flickr feed nor the IE parser, I've had to give up on that. If anyone's got ideas, I'd love to hear from you! Works fine with FireFox but I haven't tested it on other browsers - feedback appreciated.

For those that are game, feel free to link to use this on your pages. The code is released under a Creative Commons licence. Please put some attribution to Flickr somewhere though (and maybe FlickrFont too) for the use of their resources. Enjoy!

Filed in: blogtech, webtech, images, blogger-hacks, feeds, flickr, flickrfont, how-to