With damn near every design I've ever made, in the end I've always felt like I've had to settle for a design less than what I'd prefer it to be, most prominently because of typographical limits. With IFR, a big part of that problem magically went away.

However, as I began experimenting with IFR, made known by and named after Shaun Inman, I soon realized that it has a bug, or, rather, isn't as functional as I'd like it to be. The technique, essentially, works by using JavaScript to find and replace certain elements throughout a web page with Flash, making it possible to embed any font in the flash-file. However, due to the inner workings of the script, it has certain limitations to what can be replaced.

Because it wraps all replaced elements in a div-element, div-elements cannot be replaced, because that puts a loop out of synch with the elements it's supposed to replace, which confuses the script and causes a rather weird and unwanted behaviour.

Here's an example of IFR in action, where h1-elements are being replaced with Flash. This example works just great, as expected.

Now for another example, one where we want to replace div-elements instead of h1-elements. As this example shows, it doesn't work. Not entirely. Only some of the elements are being replaced, due to the loop getting out of synch with the elements which are supposed to be replaced (here explained in layman's terms and somewhat inaccurately, coders can check the source code and see for themselves).

In the previous example, I added a class attribute to the div-element which is to be replaced, this is because if you don't do that, you get an even less desired result.

So, to overcome these shortcomings (which I'm unsure of wether they're known shortcomings or if they're unknown and thereby bugs) I made a few small changes to the JavaScript, enabling this already great technique to replace any element, of any kind, using any id and any class name.

This final example shows how the modified JavaScript allows the div-elements to be replaced as well.

Not much code had to be changed, I changed the following line in the original script:

for (var i=0; i<count; i++) {
e = elems[i];

My replacement:

i = 0;
while (count) {
e = elems[i];
if(e.getAttribute("ifr-skip")) {
i++;
continue; }

And, 8 lines down, after the following line:

var c = d.createElement('div');

I added:

c.setAttribute("ifr-skip", true);

And, another 14 lines down:

i--;

My replacement:

//i--;

(The modified source is available in the final example above.)

I notified Shaun that there was a bug in his script, but I've heard no word back from him, and that was before I figured out how to fix the bug, or even what caused it.

So why not just send this bug fix directly to Shaun? Well, to begin with, maybe he is already aware of this shortcoming with his technique, and figures that it's an insignificant one. But, perhaps most prominently because I see this as a way for me to earn wicked recognition and stardom.

That's right. Fame! You see, there is a significant difference between clever CSS techniques, or even web design techniques in general, and image/flash replacement techniques, specifically. That difference is that those who come up with techniques for replacing text with images or flash get the technique named after them, instead of some other name like "Sliding Doors", "Faux Columns" or something like that. I don't know why, but it's quite fascinating.

I suspect my improvement on IFR will be known, world-wide mind you, as IFR Jogin Bug Fix, or IFR-JBF for short. Or, maybe IFR-JEE, which would stand for IFR Jogin Element Enhancement, or possibly something really obscure and difficult to remember, like Not Always Relevant or Critical Improvement to Savvy Stratagemical Information Substitution Method, which like doesn't even contain my name. Which would totally suck.

Update:
Since writing this post I've discovered a couple of limitations with this script, and have since rewritten it from scratch. Please use the new version of the script, which is included with Mike Davidson's new variant of IFR, called Scalable IFR.

Permanent link