JavaScript

sIFR and HTMLoverlays

    Simon Willison
    Share

    Here are a couple of fun new toys that have surfaced in the past 24 hours. First up, Mike Davidson, Shaun Inman and Tomas Jogin have released sIFR, a new take on Shaun Inman’s infamous IFR Flash replacement technique. Flash replacement is a smart technique built on top of semantic HTML, where portions of text are replaced (using JavaScript) with a Flash equivalent using a custom font embedded in the Flash file. sIFR improves on previous versions by ensuring that the replaced Flash file takes in to account the exact size of the headling (the ‘s’ is for Scalable). It can also be applied to any element on the page, not just headings.

    While this technique is excellent for spicing up headings, I would recommend avoiding using it for larger chunks of body text. While Flash rendered text can now be copied and pasted it still lags behind regular HTML text in a number of ways with regards to accessibility and usability – for example, with sIFR resizing text using regular browser font sizing controls will not take affect until the whole page is refreshed. That’s not to dismiss the technique: it’s a marvellous piece of work and a great example of HTML, JavaScript and Flash coming together to enhance the design of a page without reducing the semantic value of the underlying markup.

    Toy number two is HTMLoverlays, an ingenious hack from Daniel Glazman of Mozilla Composer/Nvu fame, based on an idea from Laurent Jouanneau. Overlays are an inspired feature of Mozilla’s XUL language which allow additional elements to be transplanted in to a XUL document by merging two documents together – kind of like XSLT but with far simpler syntax. HTMLoverlays is a small JavaScript which provides the same functionality to modern browsers (IE/Windows, Safari and Mozilla) for use with HTML documents. It ends up working something like a client-side include – you define a basic document structure, then relate it to an overlay file using a element in the head of the document. If that doesn’t make any sense, viewing source on Daniel’s example should clear things up.

    It’s great to see the new wave of JavaScript innovation continue.