sIFR Work

Following up on a post I made on sIFR a couple weeks back. I gave sIFR a try today to 1) get exposed to it and 2) see if the CSS for the gargoyles layout was causing problems with it.

After some trial-and-error and finally reading the documentation completely, I found a bit of a gotchya.

A quick primer: sIFR is a method for replacing HTML elements with a Flash movie that is dynamically sized to occupy the same area as the replaced HTML element. This is really useful if you want to create headings that use exotic fonts that most users won’t be able to support. ABC News uses this quite a lot.

So the first thing sIFR needs to do it get the dimensions of the element you want to replace. Then it inserts a special flash movie with the given dimensions and positions it over the location of your replaced HTML element. The Flash movie includes logic to scale the font as needed to make it fit within the given dimensions.

Now the big gotchya here is that sIFR isn’t wholly replacing the element, but rather just the content of it. So borders, padding, etc… that you apply via CSS are still there after the Flash replacement. Problem is, sIFR is including the padding and borders in its calculation of what size the Flash movie will be. The result is an element that’s too big to properly fit in the area it’s given. The fix around this is to either remove your padding via CSS, which sIFR easily lets you do by applying a global class of .sIFR-hasFlash. So you include in your CSS something like

.sIFR-hasFlash h1 { padding: 0; border-width: 0; }

And you’re ready to go.

But another method is to defining the existing padding (including borders) in the JavaScript call used to trigger the replacement. If you do this, the sIFR code will shrink the replacement area by the padding values you pass.

The big big catch/gotchya is making sure to include border widths as well as padding. If you just include padding and have a pixel-perfect layout (like the left-hand elements on many of the layouts I have here) you’re going to cause that element to get pushed down below the rest of the page.

As long as you take all of the padding into consideration, you can use sIFR just fine with gargoyles or really any other layout.

Here is an sIFR-enabled example of the gargoyles layout.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s