Blogger Hacks, Categories, Tips & Tricks

Friday, February 24, 2006
Fresh FlickrFont From Feeds
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: , , , , , , ,
Posted at 7:44 AM by Greg.
<    >
Blogger Greg said...
I think I've got to the bottom of the problem with Flickr's JSON feed and Internet Explorer.

There appears to be an extra comma appearing in the feed after the final element in the nested item list.

You can check it out yourself on the Flickr @ JSON test page.

I've let Flickr know so hopefully it will get looked at soon.

Once that stray comment is dropped, IE users can also endure FlickrFont.


<    >
Blogger Greg said...
Just when you thought it couldn't get any more gimmicky ... prompted by Johan's ecmanaut post on using keystrokes in web apps, I've put together a "typewriter mode" for FlickrFont. Predictably, I've dubbed it "TypeWritr".

I figured by five year-old nieces might enjoy it. Or not. Let's see.

<    >
This is great fun!

Umm...errr...I mean my five year old nephew found it wicked.

Make sure to turn off 'find as you type' in Firefox though, if you've got it on. I...I mean...He...had a problem with that.


<    >
Blogger Greg said...
Yeah, in my browser when you push the apostrophe button it brings up the search box. I figured out how to disable the backspace key (not that it works, but I found myself tapping it out of instinct), but I figure the apostrophe button is a browser-level event and not reachable with Javascript.

If anyone's got another view, please share.


<    >
Blogger Johan Sundström said...
Heh; a great utility for practicing writing letters to your foes, indeed! ;-)

Out of curiosity, since you have worked more with the Flickr APIs than I have -- can you pitch the feed generator another callback name somehow, as you should with proper JSONP feeds?

It seems the Flickr API has it (but using the query parameter "jsoncallback" instead of "callback"), but I don't know of anything similar here, and wanted to try using Flickr as another testcase of Exhibit's generic JSONP loader code I just checked in.

<    >
Blogger Greg said...
Hey Johan,

Yeah, as I understand it the Flickr JSON service will only give you a callback function called jsonFlickrFeed.

Even passing in the jsoncallback parameter doesn't seem to gain traction.

If desperate, you could try mangling it through Singpolyma's converter.

<    >
Blogger udayan04 said...
hey..your blog is gr8 man
i have one querry...
every post of my blog have a url..
but when i search them in google i dont get any result...only few have reults..can u suggest me any process so that every url of my blog is indexed by google

Links to this post:

Create a Link

eXTReMe Tracker