How and when to use sifr_css/html

Author: Akhun 2005-5-28 16:05:36

• Original: http://usabletype.com/articles/2004/how-and-when-to-use-sifr/
• Original Author: Andrew Hume
• Translation: Akhun

Before analyzing sIFR, let's take a quick look at what sIFR is and how it works. SIFR represents scalable Inman Flash replacement, a technology that accurately publishes custom typography on the web. This technique is accomplished by replacing some text with flash-rendered text in a specified element when the page is downloaded. It is important to understand that this element is not completely replaced by Flash, the text is still within the element, and the element can still be styled or positioned as usual.

Some facts about SIFR: Not for the sake of debate

• SIFR does not need to change (X) HTML code, all the work is done by JavaScript, Flash and CSS;
• If the user does not have Flash installed or does not support JavaScript, then the (X) HTML text will be displayed after the CSS is styled.
• The SIFR is scalable and can be changed to the default font size set by the user at render time.
• SIFR is compatible with all screen readers, so far no problems have been reported.
• sIFR text can be selected by the mouse, although the selected state does not appear to be as precise when the text is selected completely.
• SIFR does not affect the search engine positioning and evaluation, will not hide the real text content.

The conclusion should be that SIFR is an available, discreet technique that designers and developers should give serious consideration when using.

When to use sIFR

Just like all web technologies, it's important to understand the best way to use SIFR and to know the best place to use it. This refers to choosing the right tool for the job, especially when SIFR is stepping out of the toolbox as a tool for us to use.

Case: A large sports news site decided to design all the headings into the company's own fonts. News reports (including their titles) are being published in different places by people around the world through certain content management software. They can't hire people to sit in front of Photoshop and create a title picture every time they add news stories.

In this case, SIFR is an absolutely simple, accessible and extensible tool. Some news sites solve this problem by using PHP to create images on the go, or use other server-side approaches. This is a good way to save time, but when compared to SIFR, you will see a number of drawbacks:

• The picture cannot be scaled to the user's default font size.
• Although the picture is cached on the server, there is still a performance problem when the picture is generated.
• Each image must be downloaded separately, resulting in server and bandwidth consumption.

With sIFR, only one flash (. swf) file and one JavaScript (. js) file are downloaded, and all titles on the site are rendered as the company's font.

This example is not unfounded. This is a real case, in 2001, in order to redesign Espn.com,mike Davidson developed the original flash replacement technology. Since then, with the addition of Shaun Inman and others, this has evolved into a complete and fluid technology that we have today, and is likely to have a major impact on Web publishing technology in the 2005.

Use sIFR on a link

The latest version of SIFR allows the link text to be replaced. Although this is an exciting development, it is not suitable for use on such occasions. This is due to the following accessibility issues:

• Browser-enabled right-click functionality (context menu) is not supported
• Apple's option key is not supported
• No status bar information

Although these problems seem trivial, many people find that the lack of these features is frustrating. Without information about the status bar, you can't get a clue to the next address you want to access; With the popularity of Firefox and opera browsers, the context menu for right-click is becoming an increasingly useful tool. Although SIFR provides a basic right-click on the link, the browser's context menu is inaccessible.

Of course, this is the limitation of flash rather than SIFR itself. These problems seem to be overcome in the future. For example, the status bar can be controlled by JavaScript, so it should not be difficult to increase the ability to display the link target. However, before Flash allows the full browser context menu to be provided on the link, I believe SIFR is not yet fully processing this type of text.

Anti-aliasing

sIFR Most of the benefits are focused on the ability to customize fonts, one important consideration is that flash text can be anti-aliased. Web developers often forget this, in part because so much of the work is done with Mac OS X, and its quartz fonts can produce smooth edges. However, users of Windows (although the option to have smooth font edges somewhere on the display menu) do not appear to be anti-aliased, enabling them to have the ability to display anti-aliasing titles as well as users preinstalled with Windows XP or Mac OS X. An important consideration.

Fine adjustment

I heard a question repeatedly mentioned, that is, SIFR does not allow control of text as it is possible to control a picture. That's true. With Photoshop or fireworks, you can precisely control kerning, stretching, anti-aliasing, or other features, such as a very accurate drop shadow. The image editor is a real WYSIWYG (what you see is what you get) medium. The sIFR, which is rendered as flash, is not.

If this level of control is needed, then a picture is still the best way to publish such text, in which case SIFR is not the right tool. However, if you are simply publishing a custom font, then SIFR is more appropriate than creating a picture.

Download speed

When using SIFR, the coloring speed of the replacement text is an important consideration, although there has been a significant increase in speed since the earlier version, but there is a noticeable delay if there are many SIFR instances on the same screen at the same time. (for example, each page has a title, or each transfer has a title) This example might be the best illustration of why using SIFR appropriately is the ideal way to use the technology today.

This is the most frustrating drawback of using flash replacement technology. From the first sIFR, the temptation is to replace too many elements on one page. In order to implement them, the speed of the download must be greatly improved, although a good server can help you, but it really consumes time to run those bulky JavaScript.

Summarize

SIFR does not compete with image replacement technology, it is a unique tool for different jobs. It can be best used on text that is displayed as the default font size of the browser and cannot be replaced with a self-built picture.

sIFR ideal for use when you want to display a custom font or anti-aliasing title with just one picture. This is used very frequently on the web, and sIFR is a better choice in these cases. It can be scaled to the user's default font size, can be selected, can be used on thousands of pages and only need to download one or two files.

Summary

• Use sIFR on the page header.
• Limited use of SIFR to get the best download time.
• Do not use SIFR on links.

RELATED LINKS

• Mike davidson:introducing sifr:the Healthy alternative to Browser Text
• Mike DAVIDSON:SIFR 2.0 RC 3 is here ... Come Get Some
• Dave Shea on SIFR

