Wiki source for SifrIntegration
=====Integrating sIFR in a wiki=====
""<abbrv title="Scalable Inman Flash Replacement">sIFR</abbrv>"" 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 [[http://typo.openformats.org/wikka.php?wakka=HomePage | 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).
{{image class="border" alt="sIFR/Wikka screenshot" title="sIFR/Wikka test server" url="images/sifr.jpg" link="http://typo.openformats.org/wikka.php?wakka=HomePage"}}
http://typo.openformats.org/wikka.php?wakka=HomePage
Feel free to play in the [[http://typo.openformats.org/wikka.php?wakka=SandBox | 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 [[http://www.mikeindustries.com/blog/files/sifr/2.0/sIFR2.0.1.zip | 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: --- %%(css)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: %%(html4strict)
<!--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 :)
== External links ==
~-[[http://www.mikeindustries.com/sifr/ | sIFR 2.0]]
~-[[http://www.mikeindustries.com/blog/files/sifr/2.0/ | sIFR official demo]]
~-[[http://www.macromedia.com/devnet/dreamweaver/articles/sifr_demo.html | Macromedia:Introduction to sIFR]] - A very useful video explaining step-by-step how to create sIFR-powered pages.
----
CategoryDevelopment3rdParty
""<abbrv title="Scalable Inman Flash Replacement">sIFR</abbrv>"" 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 [[http://typo.openformats.org/wikka.php?wakka=HomePage | 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).
{{image class="border" alt="sIFR/Wikka screenshot" title="sIFR/Wikka test server" url="images/sifr.jpg" link="http://typo.openformats.org/wikka.php?wakka=HomePage"}}
http://typo.openformats.org/wikka.php?wakka=HomePage
Feel free to play in the [[http://typo.openformats.org/wikka.php?wakka=SandBox | 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 [[http://www.mikeindustries.com/blog/files/sifr/2.0/sIFR2.0.1.zip | 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: --- %%(css)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: %%(html4strict)
<!--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 :)
== External links ==
~-[[http://www.mikeindustries.com/sifr/ | sIFR 2.0]]
~-[[http://www.mikeindustries.com/blog/files/sifr/2.0/ | sIFR official demo]]
~-[[http://www.macromedia.com/devnet/dreamweaver/articles/sifr_demo.html | Macromedia:Introduction to sIFR]] - A very useful video explaining step-by-step how to create sIFR-powered pages.
----
CategoryDevelopment3rdParty
