Scalable Inman Flash Replacement
Encyclopedia
Scalable Inman Flash Replacement (sIFR) is an open source
JavaScript
and Adobe Flash
dynamic web fonts
implementation, enabling the replacement of text elements on HTML
web pages with Flash equivalents. It was initially developed by Mike Davidson and improved by Mark Wubben. It is a scalable variety of HTML text-to-flash replacement pioneered by Shaun Inman.
, so there was no guarantee that fonts specified in CSS or HTML would show as intended, as the browsing user may or may not have had the specified font installed in their system. sIFR embeds a font in a Flash element that displays the text, pre-empting the need for a font to have been manually pre-installed on a user's system.
A common technique is to use raster graphics
to display text in a font that cannot be trusted to be available on most computers. Text created this way pixelates when scaled and cannot be partially selected. In contrast, sIFR text elements mimic normal HTML text – they are relatively resizeable and copyable.
sIFR requires JavaScript to be enabled and the Flash plugin installed in the reading browser. If either condition is not met, the reader's browser will automatically display traditional CSS based styling instead of the sIFR rendering. sIFR is not designed for body copy text as rendering greater bodies of text with Flash place formidable demands on the computer. Due to this restriction, Mike Davidson himself admitted that
sIFR has been used on a variety of well-known web pages, such as those of GE
, Nike
and Red Hat
. As of December 2008, the current sIFR release is version 2.0.7. Version 3 is in beta.
can be preserved using this technique, users should be aware that sIFR affects page loading time (from the multiple requests required for the Flash, JavaScript and CSS files used by sIFR). Also, the growing popularity of browser ad blocker
plugins and some smartphones may prevent Flash content from loading, instead displaying a "block" button which thereby obscures the page data, although this can be adjusted through individual plugin settings.
support in browsers has been renewed, with at least the latest versions of the four most popular browsers supporting them.
.
Open source
The term open source describes practices in production and development that promote access to the end product's source materials. Some consider open source a philosophy, others consider it a pragmatic methodology...
JavaScript
JavaScript
JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....
and Adobe Flash
Adobe Flash
Adobe Flash is a multimedia platform used to add animation, video, and interactivity to web pages. Flash is frequently used for advertisements, games and flash animations for broadcast...
dynamic web fonts
Web fonts
Web typography refers to the use of fonts on the World Wide Web. When HTML was first created, font faces and styles were controlled exclusively by the settings of each Web browser. There was no mechanism for individual Web pages to control font display until Netscape introduced the tag in 1995,...
implementation, enabling the replacement of text elements on HTML
HTML
HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....
web pages with Flash equivalents. It was initially developed by Mike Davidson and improved by Mark Wubben. It is a scalable variety of HTML text-to-flash replacement pioneered by Shaun Inman.
Overview
CSS support in web browsers did not, at the time of sIFR's creation, allow webpages to dynamically include web fontsWeb fonts
Web typography refers to the use of fonts on the World Wide Web. When HTML was first created, font faces and styles were controlled exclusively by the settings of each Web browser. There was no mechanism for individual Web pages to control font display until Netscape introduced the tag in 1995,...
, so there was no guarantee that fonts specified in CSS or HTML would show as intended, as the browsing user may or may not have had the specified font installed in their system. sIFR embeds a font in a Flash element that displays the text, pre-empting the need for a font to have been manually pre-installed on a user's system.
A common technique is to use raster graphics
Raster graphics
In computer graphics, a raster graphics image, or bitmap, is a data structure representing a generally rectangular grid of pixels, or points of color, viewable via a monitor, paper, or other display medium...
to display text in a font that cannot be trusted to be available on most computers. Text created this way pixelates when scaled and cannot be partially selected. In contrast, sIFR text elements mimic normal HTML text – they are relatively resizeable and copyable.
sIFR requires JavaScript to be enabled and the Flash plugin installed in the reading browser. If either condition is not met, the reader's browser will automatically display traditional CSS based styling instead of the sIFR rendering. sIFR is not designed for body copy text as rendering greater bodies of text with Flash place formidable demands on the computer. Due to this restriction, Mike Davidson himself admitted that
sIFR has been used on a variety of well-known web pages, such as those of GE
General Electric
General Electric Company , or GE, is an American multinational conglomerate corporation incorporated in Schenectady, New York and headquartered in Fairfield, Connecticut, United States...
, Nike
Nike, Inc.
Nike, Inc. is a major publicly traded sportswear and equipment supplier based in the United States. The company is headquartered near Beaverton, Oregon, which is part of the Portland metropolitan area...
and Red Hat
Red Hat
Red Hat, Inc. is an S&P 500 company in the free and open source software sector, and a major Linux distribution vendor. Founded in 1993, Red Hat has its corporate headquarters in Raleigh, North Carolina with satellite offices worldwide....
. As of December 2008, the current sIFR release is version 2.0.7. Version 3 is in beta.
Criticism
Although web accessibilityWeb accessibility
Web accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality...
can be preserved using this technique, users should be aware that sIFR affects page loading time (from the multiple requests required for the Flash, JavaScript and CSS files used by sIFR). Also, the growing popularity of browser ad blocker
Ad filtering
Ad filtering or ad blocking is removing or altering advertising content in a webpage. Advertising can exist in a variety of forms including pictures, animations, text, or pop-up windows. More advanced filters allow fine-grained control of advertisements through features such as blacklists,...
plugins and some smartphones may prevent Flash content from loading, instead displaying a "block" button which thereby obscures the page data, although this can be adjusted through individual plugin settings.
Alternatives
Since the creation of sIFR, dynamic web fontsWeb fonts
Web typography refers to the use of fonts on the World Wide Web. When HTML was first created, font faces and styles were controlled exclusively by the settings of each Web browser. There was no mechanism for individual Web pages to control font display until Netscape introduced the tag in 1995,...
support in browsers has been renewed, with at least the latest versions of the four most popular browsers supporting them.
- Facelift Image Replacement (FLIR) is a similar software to sIFR. But instead of using flash, it embeds plain images, that are generated automatically from the text on the webpage. So even if user does not have flash plugin installed, he will see the text replaced by FLIR. However, FLIR requires that the website host is capable of running PHPPHPPHP is a general-purpose server-side scripting language originally designed for web development to produce dynamic web pages. For this purpose, PHP code is embedded into the HTML source document and interpreted by a web server with a PHP processor module, which generates the web page document...
, and it is even less accessibleAccessibilityAccessibility is a general term used to describe the degree to which a product, device, service, or environment is available to as many people as possible. Accessibility can be viewed as the "ability to access" and benefit from some system or entity...
than sIFR.
- Cufón is an alternative that converts font paths to vector graphicsVector graphicsVector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygon, which are all based on mathematical expressions, to represent images in computer graphics...
stored in JSONJSONJSON , or JavaScript Object Notation, is a lightweight text-based open standard designed for human-readable data interchange. It is derived from the JavaScript scripting language for representing simple data structures and associative arrays, called objects...
data format and then renders the fonts to canvas elements or VML (depending on availability) using a JavaScript rendering engine. A significant disadvantage in using Cufón is the requirement that the embedded font's license allow its distribution in unencrypted form, which many commercial fonts expressly forbid.
Trivia
The name of the original technique was derived from an anagram of the acronym for the CSS image-replacement technique it was designed to replace, Fahrner Image ReplacementFahrner Image Replacement
Fahrner Image Replacement is a Web design technique that uses Cascading Style Sheets to replace text on a Web page with an image containing that text...
.
External links
- sIFR 3
- Wiki.Novemberborn, sIFR Documentation & FAQ
- Introducing sIFR: The Healthy Alternative to Browser Text by *Mike Davidson
- FLIR - Facelift Image Replacement software
- Online sIFR Generator
- Another Online sIFR Generator
- A Library of sIFR fonts
- Official Google Webmaster Central Blog Google prefers sIFR as announced during SMX Advanced 2008
- This is how you get sIFR to work, a guide for implementing sIFR (using sIFR3)
- jQuery sIFR plugin, a jQueryJQueryjQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig...
-flavored version of sIFR