Integrating sIFR in a wiki


sIFR is a Flash-based technique to render headings with fonts that are not available on the client's machine. Unlike image replacement techniques, the text in the headings remains accessible, scales when the windows is resized and can be selected and copied as any other text on the page. There are known accessibility issues when this techniques is applied to elements other then headings or with headings containing links and when forcing change in the default font size.

I just hooked sIFR 2.0 into a freshly installed Wikka build (1.1.6.0), to see how it looks like. The results are not too bad, in spite of some slowness when loading the page for the first time (probably due to the short bandwidth hit when downloading the flash animations).

sIFR/Wikka screenshot
http://typo.openformats.org/wikka.php?wakka=HomePage

Feel free to play in the SandBox. Feedback welcome :)

sIFR bundled with Wikka?
Definitely not ;) Although an optional plugin allowing drop-in sIFR functionality would be nice. I thought some of you might be interested in getting sIFR up and running on a Wikka server, so here's some quick installation hints.

Installation
The installation (not really out-of-the-box functionality) required the following steps:
  1. Download the sIFR package.
  1. Generate the swf files following the instructions included with the package (Note: you will need Macromedia Flash - not just the Flash Player, to edit the .fla file).
  1. Make sure that in your wikka stylesheet the default styling of your headings contains both font-size and line-height values. For example:
    h1 {
        font-size: 18pt;
        line-height: 20pt;
    }

  1. Modify sifr.js and the two sIFR stylesheets following the instructions. You can add the replacement statements either in the sifr.js file itself, or in a dedicated <script> block in the page head or anywhere in the page body.
  1. Upload the sIFR files (.js + .css + .swf) in an accessible folder on your web server (e.g. css/sifr/).
  1. Modify actions/header.php so that the script and stylesheets are loaded:
    <!--sIFR Settings START-->
        <link rel="stylesheet" type="text/css" href="css/sifr/sIFR-screen.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/sifr/sIFR-print.css" media="print" />
        <script src="css/sifr/sifr.js" type="text/javascript"></script>
        <script src="css/sifr/sifr-addons.js" type="text/javascript"></script>
    <!--sIFR Settings END-->   

  1. That's all: point your browser to your wikka server (make sure you have a Flash plugin installed and javascript enabled) and cross your fingers. If the tweak worked, you should see beautifully rendered, selectable and text-browser accessible headings with your favorite typefaces.

Enjoy :)


CategoryDevelopment3rdParty
There is one comment on this page. [Display comment]
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki