Quantcast
   
Titan CMS online support, find help and get answers

How to Integrate Flash Replacement (sIFR)

  • Published: October 05, 2008
  • |
  • Updated: January 19, 2009
  • |
  • Version: 6
 Summary

When website designs require rich typography for headlines, it is common for heading images to be utilized to satisfy the design. However, this approach introduces challenges related to SEO, accessibility, and manageability of content. This article contains information regarding the use of Scalable Inman Flash Replacement (sIFR) in your Titan CMS content managed website as an alternative way to integrate rich typefaces. 

 Background

sIFR is a method for replacing short segments of HTML text with the same content rendered in the typeface of your choice. Using this method, site content can be rendered using typefaces that have historically been considered not safe for the web. Furthermore, the typeface may not even exist on a given users system.

The magic of sIFR is accomplished through the combined use of JavaScript, CSS, and Flash in approximately the following way:

  1. A standard HTML page is loaded by the client browser.
  2. A JavaScript function runs to confirm the availability of Flash in the browser, and then identifies the specific HTML tags (H1, H2, etc) you’ve configured for replacement.
  3. If JavaScript is disabled, or if Flash is not installed, the page renders as normal.  If Flash is installed, JavaScript parses the source HTML for anything that needs to be replaced.
  4. The JavaScript then creates individual Flash movies for each replacement and overlays them on the original element, using the source text as a variable for the Flash movie.
  5. The Flash movie then renders the source text in your chosen typeface.

The technique will work as long as the user has JavaScript enabled and the Flash plugin installed. If one or other is not available, the browser will fall back to traditional CSS based styling.

 Instructions

The instructions given here include the steps to add the various JavaScript snippets to your Titan Page Layouts. Additional instruction on exporting the sIFR Flash file and the CSS styles required to implement can be located in the supporting documentation in the sIFR download.

 

Configure Source Library

The Titan Administration module gives you the flexibility to specify code snippets that can be placed in the HEAD section of your pages. To enable the use of sIFR on a specific page, you need to first add the script to that page by making a configuration change in Titan Administration.

  1. Login to your Titan CMS Workstation as a webmaster or administrative user.
  2. Switch to the Titan Administration module.
  3. Using the Download Files button, upload the sIFR JavaScript library into the CommonScripts folder.
  4. Go to the configuration screen for the Page Layouts in your specific Globe under the Content Sites node.
  5. Add a SCRIPT reference in the Post-Titan Metatags/Code Snippets textarea that points to the sIFR JavaScript library you uploaded to CommonScripts. Depending on version (see References for download details), the script reference should be something like the following:

    <SCRIPT src="/CommonScripts/sIFR.js" type="text/javascript"></SCRIPT>
     
  6. Save the Page Layout changes and Refresh Site State

 

Add Replacement Statements

The sIFR documentation recommends that the JavaScript code for performing a replacement be added at the end of your HTML page. The actual code required should be developed on a case by case basis, using the sIFR documentation as a guide. The integration of this code into Titan can be accomplished in one of two ways.

  1. Paste the JavaScript replacement code in a Freeform Block at the bottom of each page on which you want to use sIFR. This is most appropriate in cases where the replacement is only needed on a few pages.
  2. Paste the JavaScript replacement code at the end of each Titan CMS Page Layout that requires sIFR. This is most appropriate in cases where all pages of a given layout need to automatically use sIFR. Adding code to a Page Layout will make maintenance much easier.

The Titan Administration module gives you the flexibility to modify the content of a Page Layout for adding the sIFR script. To add sIFR script to the end of a Page Layout, you need to edit the content of a PageLayout ASCX file.

  1. Login to your Titan CMS Workstation as a webmaster or administrative user.
  2. Switch to the Titan Administration module.
  3. Go to the configuration screen for the global list of Page Layouts.
  4. Locate and expand the layout that needs to be edited.
  5. Click the Edit button next to the Display Page Dot Net field.
  6. Using the inline text editor, add a <SCRIPT> block of HTML after the last closing DIV tag. Paste into this script block any sIFR related code, and click Save.

    Important: The content of a Page Layout must adhere to strict, well-formed XHTML standards. Incorrectly modifying a Page Layout could impact the display of your site.
 References

Introducing sIFR: The Healthy Alternative to Browser Text
http://www.mikeindustries.com/blog/archive/2004/08/sifr

Download the official sIFR 2.0.2 Release
http://www.mikeindustries.com/blog/files/sifr/2.0/sIFR2.0.2.zip