CSS Cookbook, 2nd Edition

2017-07-07 02:10:07

Problem

You want to replace HTML text with more typography choices, but without the hassle of having to manually update static images (as discussed in Recipe 3.9).

Solution

Use the Scalable Inman Flash Replacement (sIFR) technique.

Download the JavaScript and other components used for the technique at http://www.mikeindustries.com/sifr/.

Using Flash, open the sifr.fla file. Click on the white canvas area (it will appear as though there isn't anything present) to bring up the Properties palette (shown in Figure 3-18).

Figure 3-18. Bring up the Flash Properties palette

Select the font you wish to use on your web site design (see Figure 3-19).

Figure 3-19. Pick the typeface from the Flash Properties palette

Next, export the file and name the exported file with the name of the typeface. For example, the Bell Gothic typeface would be named bellgothic.swf.

The sFIR files include a set of CSS rules that need to be copied and pasted onto the site's CSS files. Be sure to include these files. To bring up the typeface, adjust the CSS rules to include, for example:

h1 { font-family: "Bell Gothic", Arial, Verdana, sans-serif; margin: 0 0 .3em 0; padding: 0 0 .3em 0; border-bottom: 2px solid #666; text-align: left; font-size: 2em; }

Finally, upload the files to view results like the headline in Figure 3-20.

Figure 3-20. The headline appears in Bell Gothic

Discussion

In 2004, web developer Shaun Inman created the Inman Flash Replacement method. While lightweight and direct in scope, it accomplished the job of replacing typical HTML text with Flash-based text.

Another web developer Mike Davidson used Inman's technique as the basis for a more robust system that allowed for text resizing and multiline text.

The sFIR method is used primarily for replacing heading text and not text-based links. Although it's possible to replace the text-based links, it's not recommended as users won't be able to right- or middle-click the links to open the pages in a new browser.

Since the technique makes heavy use of JavaScript and Flash, visitors to your site may notice that the browser is taking longer than usual to render the sFIR text.

Another issue is that although most modern browsers like Internet Explorer for Windows, Opera 8+, Safari, and Firefox support Flash transparency, the ability for the browsers to render background images through the transparency is a CPU intensive. Users on slower machines may notice a sluggish surfing experience.