sIFR 2007: The Roundup

sIFR, the Flash-powered text image replacement technique pioneered by Shaun Inman, Mike Davidson and Mark Wubben burst onto the scene in late 2004 with plenty of fizz and bubble but seems to have lost some visibility over the past 12 months. I thought we’d take a moment to peek at some of the newer stuff happening in the area.

1) sIFR3 : Even sIFRer!

The newest incarnation – sIFR3 — was released in February incorporating a swag of new tricks including:

  • using bold and italics together
  • using multiple colors
  • support for leading, kerning and opacity
  • support for Flash filters, blend modes and anti-aliasing
  • support for pixel fonts
  • improved IE performance

Reid Beels sIFR3 GradientsReid Beels has also come up with a nice variation that may well work it’s way into the main sIFR build — support for gradients.

Reid’s site actually selects the gradient used in his header text based on his current Twitter status. Useful? Maybe not, but a nifty idea nevertheless, and Reid gives a thorough explanation of his gradient method on his site.

2) Making Flash without Flash

One of the main handbrakes on sIFRs wider uptake has been it’s reliance on Flash — not so much from an end-user point of view, but more as part of the production cycle. If you don’t own the Flash authoring product (and plenty of web developers don’t) you have limited options when it comes to generating the simple SWF file that contains your font.

No more. Ian Purton has constructed a simple, free, online service that takes your uploaded truetype font, converts into a sIFR-ready SWF and emails it back to you. We actually talked about writing something like this a little while back, so it’s great to see someone get it done.

Ian’s is a no-frills service and I’d imagine who could get a more optimized SWF of you made it manually, but the service is fast and it works. Nice.

3) swf Image Replacement: sIFR for your Pictures

swfIR is a nice example of noticing a good idea and seeing where else it fits. It harnesses the core concept behind sIFR — i.e. grabbing bonfided HTML elements and loading them into custom Flash movies to give them new super powers — but applies it to pictures rather than text.

swfIR - sIFR for imagesThe bit I particularly like is the ability to tilt your images at random jaggy angles within your layout, but the technique also provides the full gamut of border, corner and shadows effects. Of course, this is a progressive enhncement, so users without Flash and/or JavaScript will be no worse off with the standard IMG tags will be rendered normally.

Keeping in mind some of the growing number of impressive Canvas and SVG experiments appearing lately, I can’t imagine that it will be long before we see a an entirely JavaScript and SVG/Canvas based equivalent.

Any Canvas tinkerers interested in glory?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Anonymous

    > I can’t imagine that it will be long before we see a an entirely
    > JavaScript and SVG/Canvas based equivalent.

    exactly, so what is the point of it? never been a fan of flash, never have, and never will. not when there are more enviromentally friendly options available… such as standards for example?

    flash? please…

    dr livingston, grumpier than usual

  • Jackston

    Dr. Livingston-

    Perhaps you are aware that the “standards” appear differently in different browsers, while a Flash piece looks the same across all browsers and OS platforms that have the plugin. Also, flash’s video capabilities have been the only one without significant security issues, and they also work cross platform. Windows media and quicktime are spotty, at best, even after all these years, and Real Player is a joke.

    I’ll take any solution that let’s me avoid the headache of programming rich designs in Microsoft browsers. You don’t get more “standard” than Flash.

    Mr. Jackston, A little more tired of CSS layout/appearance issues in Microsoft browsers than usual.

  • http://www.sitepoint.com AlexW

    Dr Livingstone, I’m no Flash evangelist, but it currently offers the most effective solution to this particular problem — you currently can’t reliable get the some combination cross-browser, selectable, copy-pastable, elegantly degrading dial-a-font with any combination of CSS, JavaScript and HTML. If someone comes up with a better way, people will no doubt choose it.

    Some people will choose not to use it, but others are always going to see value in being able to choose their heading typeface and that’s not likely to change. If you’ve got a better solution, the market is primed.

    Get a’codin’! ;)

  • Mark Wubben

    Hang on now, sIFR 3 is still in beta! Although, of course, it’s a really cool beta.

    I’m looking to add Reid’s trick as well, along with some other effects.

  • http://www.brothercake.com/ brothercake

    Correct me if I’m wrong, but isn’t an SVG equivalent close-to impossible? SVG doesn’t embed fonts – it relies on the user’s font collection just as CSS does. So short of converting the type into an actual drawing (something I’ve tried, and it works, but only via a tool like illustrator to create a hard-coded SVG file) .. how could such a thing be possible?

  • Anonymous

    > Perhaps you are aware that the “standards” appear differently in
    > different browsers,…

    unfortunately, that is true but i think you miss the point? that being what standards represent, to both the users of the internet and us, the developers.

    true, for the moment standards are not there for cross browser development but we can only try… if vendors, such as microsoft had to get up off their a*** and comply fully, instead of releasing complete crap half of our battle would be won.

    > …while a Flash piece looks the same across all browsers and OS
    > platforms that have the plugin.

    i don’t have that plugin, and have no intentions of installing it either. i’m sure there are others amongst us who feel the same? but you are right when it comes to cross browsers, so i’ll let you have that ;)

    > …, and Real Player is a joke.

    isn’t it?

    finally…

    > You don’t get more “standard” than Flash.

    flash isn’t a standard because of a number of reasons; for one to be able to fully appreciate flash you need said plugin. why should the user be forced to install software just to be able to enjoy it?

    with standards, the whole point is that the user isn’t forced into making a choice s/he doesn’t want to make. just because flash works as is across any number of platforms, doesn’t make it a “standard” in the true sense of what the w3c is and what it is trying to achieve.

  • http://www.sitepoint.com AlexW

    Hang on now, sIFR 3 is still in beta! Although, of course, it’s a really cool beta.

    Sorry Mark, I read those last fix releases as full releases. It’s certainly got some nifty features.

    Correct me if I’m wrong, but isn’t an SVG equivalent close-to impossible?

    James, I was talking more about an SVG/Canvas equivalent of the sIFR for images thing — using SVG to skew, tilt and add other border and masking effects not viable in pure CSS.

  • iwanttokeepanon

    Flash is not a “standard”. Flash is a proprietary plug-in. That being said, I usually use opera WITHOUT plug-ins configured (that’s on purpose). When I use firefox, you bet I have flashblock installed. IE, why bother?

    If you want me to see your content, make sure it “degrades” to MY viewing style.

  • dkeesler

    Let’s not compare apples and oranges. Any SVG solution will be image based. PHP already offers an image based text replacement solution, although it’s a bit clumsy and doesn’t handle non-proportional fonts well. Remember, the BIG selling point with sIFR (besides it’s ease of use) it that the flash text is still TEXT. It can be searched, copied/pasted, etc. — it behaves like ordinary text.

    I’ve tested it with more than 20 highly different fonts. It still has some difficulty scaling certain fonts correctly… you have to experiment a little — but it is FAR more effective and much simpler than using ImageMagick or imagettftext() in PHP. Also, with PHP there is often a noticeable delay while the image is being generated. With sIFR I have not yet noticed even a hint of a delay on any servers I have tested on.

    And for those of you who are still resisting Flash technology, I say this: Are you kidding me? This is a DEVELOPER’S site right? You are seriously going to develop websites today and not put Flash in your toolkit? No, you are not! Think of this: Active-X will for sure get blocked. Applets may/may not function correctly depending on whether/what version of JRE is installed client-side, and the end user will still be uncomfortable having to download the applet (security), CSS and all client-side scripting can be disabled/overridden. Next to server-side scripting, Flash may be the most reliable cross-browser tool in your bag. In my experience, while my average website may only contain a small handful of Flash objects, I could survive longer without .NET 2.0 than I could without Flash.