You are here:  Home    Blog    TYPO3: sIFR vs. GIFBUILDER

 

TYPO3: sIFR vs. GIFBUILDER
Tuesday, October 16, 2007 at 12:48 PM

Essential Dots will start contributing to the open source community with articles on how this web site has been created. The first article describes how (and why) the headers on this web site have been created using sIFR (Scalable Inman Flash Replacement) instead of using highly praised GIFBUILDER.

Figure 1. Sample usage of sIFR on the essentialdots.com

Headers rendered using GIFBUILDER with true type fonts and niceText option are common on TYPO3 powered web sites. Although rendering of these images may impose stress on web server, TYPO3 caching greatly improves performance by ensuring that the image is rendered only once and later on delivered straight from the front end cache. Given that, why would someone try to implement some other solution? The reason why we have done is search engine optimization. Even though crawlers extract alt and title attributes from image elements, using of text instead of images will improve SEO. This is where sIFR comes in handy.

sIFR is a method of inserting rich typography into web pages without sacrificing accessibility, search engine friendliness, or markup semantics. sIFR replaces short passages of plain browser text with text rendered in custom font using Flash player (version 6). This is accomplished using JavaScript and CSS. You can see where we have used sIFR on the figure 1.

Manual insertion of sIFR into TYPO3 web site

The following text assumes that you have downloaded sIFR libraries. You should put the following lines in the head of your pages:

<link rel="stylesheet" type="text/css" 
   href="fileadmin/css/sIFR-screen.css" media="screen" />
<link rel="stylesheet" type="text/css" 
   href="fileadmin/css/sIFR-print.css" media="print" />
<script src="fileadmin/js/sifr.js" 
   type="text/javascript"></script>

This can easily be done in TypoScript:

page.includeCSS.file1 = fileadmin/css/sIFR-screen.css
page.includeCSS.file1.media = screen
page.includeCSS.file2 = fileadmin/css/sIFR-print.css
page.includeCSS.file2.media = print
page.includeJS.file1 = fileadmin/js/sifr.js

The next step is to insert heading as regular HTML element and format it using CSS (like there is no sIFR library or GIFBUILDER):

<h1 class="header">TYPO3: sIFR vs. GIFBUILDER</h1>

This can easily be done in TypoScript as well:

temp.heading = TEXT
temp.heading.field = nav_title // title 

Once you finish tweaking CSS and create SWF font file as described in the sIFR documentation, you should put the following code in your body:

if(typeof sIFR == "function"){
   sIFR.replaceElement(
      named(
         {
         sSelector:"h1.header", 
         sFlashSrc:"fileadmin/swf/myriadprocond.swf", 
         sColor:"#E6A540", 
         sLinkColor:"#E6A540", 
         sBgColor:"#FFFFFF", 
         sHoverColor:"#E6A540", 
         nPaddingTop:0, 
         nPaddingBottom:10, 
         sFlashVars:"textalign=left&offsetTop=0"
         }
      )
   );
};

In order to avoid some browser's trouble you should add this on body load (see this page's source for example). Please read sIFR documentation for explanation of named attributes used in previous example.

TYPO3 sIFR extension

If you would like to use sIFR directly from TypoScript you can use gb_sifr extension. Please read extension's documentation for more details on implementation.

sIFR Pros/Cons

Pros:

• improved search friendliness
• absolutely no strain on the web server
• maintained accessibility
• maintained markup semantics

Cons:

• requires Flash player
• doesn't look as good as GIFBUILDER without Flash player installed
  

Thank Mike Davidson and Mark Wubben for creating great sIFR library!

Related links:

• sIFR (Scalable Inman Flash Replacement)
• GIFBUILDER - TYPO3Wiki