hongkiat.com |
| Dynamic Image Replacement: Practical Techniques and Tools Posted: 11 Sep 2009 11:53 AM PDT When it comes to web design, creativity of design should not be hold back by the limited choices of supported web fonts we call the web-safe fonts. Designers should be having freedom to use any fonts they preferred on titles and contents. In 2005, dynamic image replacement was made popular with a technique called Scalable Inman Flash Replacement (sIFR). Developed by Shaun Inman, sIFR take advantage of Javascript and Adobe Flash to allow web designers to use any custom fonts they like on the website and still maintain visibility to those who don't have that font. And as the web continues to evolve, today we have more alternative solutions using various technologies, just in case you are not quite a fan of Flash. Without further ado, let's take a look at some of the techniques to achieve Dynamic Image Replacements.
Commonly Used TechniquesHere are some of the most commonly practiced techniques for dynamic image replacements. Scalable Inman Flash Replacement (sIFR)sIFR is one of the most popular method to embed custom fonts on websites. It uses Javascript and Flash to generate custom typeface for your website and allows converted typeface to be selectable. Aside from that, converted typeface remains as text in source codes so search engine can still crawl them. sIFR 2 (recommended) is the current stable release, however if you are looking into implementing sIFR, you should also know that siFR 3 beta is also available for download. It might be a little buggy but at least it solves the font-expansion problem of sIFR 2. Tools for sIFR that might come in handy:
sIFR LiteThe original sIFR is 22k, so Dave decided to rework it using a more object-oriented approach, and the result? 3x smaller at 3.7k. PHP + CSS Dynamic Text Replacement (P+C DTR)As the name suggest, this is a text replacement method that uses PHP and CSS that make use of the original method described by Steward Rosenberger. It is also an enhancement from the previous version developed by R. Marie Cox that doesn't support text wrapping and inner tags. Another cool thing about P+C DTR is, the image text can be customizable with CSS tags. typeface.jsWhat makes typeface.js special is that they only use Javascript to embed custom fonts and style can be further customized with HTML and CSS, no Flash is required. It is open source and supports most browsers we are using these days, whether it's Safari, Firefox, IE (6 and above). Personally after some experiments with typeface.js, we think there could be some potential room for improvements. Firstly, the fonts tend to render slightly different among different browsers. If you are using typeface.js, we suggest you do a cross-browser check before assuming what you see in Firefox will be what you see in Safari. Text are also not selectable with typeface.js. Custom fonts in typeface.js are not compiled; meaning users are able to download the fonts. That could lead to copyright problem. It's advised that you checked thoroughly to make sure the fonts you are using are ok for redistribution. CufonNo Flash required, Cufon is a great alternative to sIFR and it's quite simple to implement. First, you use the Cufon generator to generate and customize the font you want, then you insert the Cufon Javascript in your source code and you tell the script which selectors you want the fonts to be customized. The biggest problem with Cufon would be the legal issue of using these custom fonts online. Since it's embedded within Javascript , it can be easily ripped by anyone who view the source code. Cufon custom fonts are not selectable, that's the other turn off. FaceliftAlso known as Facelift Image Replacement (FLIR), it is another great method to sIFR that do no required Flash. Looks like very other alternative is hitting in sIFR's Flash issue. Facelift uses PHP and PHP's GD Library. They inherit the legacy problem of custom font replacements – unable to select the text. Aside from that, we think it's great too. More MethodsThe techniques above might be more widely used, but we’ve noticed some other ways too to give convert your text into beautiful custom typefaces. Type SelectTypeSelect leverages on typeface.js, jQuery, the canvas, toDataURL, CSS background properties and real overlayed text to give a custom typeface on your website. Text selection works on Firefox, Safari and even Chrome but not IE. Swf Image Replacement (swfIR)swfIR gives you the ability to apply an assortment of visual effects to any or all images on your website. For example, you can add any images on your website and swfIR will add a rounder border, rotate the positioning or even add shadows to it. Scalable Jens Image ReplacementCreated by Jens Persson and based on sIFR, this method uses javascript to replaces some elements in a (X)HTML document with calls to a image generator written in php. Allowing you to use fonts in your web design that is not available on the users computer. Nine Techniques for CSS Image ReplacementThese are not dynamic text replacements, but Chris Coyier demonstrates as much as nine different CSS techniques to replace text with images; each with a report card listing the condition of – what if images are on/off, CSS is on/off. Font BurnerFont Burner leverage on Scalable Inman Flash Replacement (sIFR) to change your titles into custom font. All you need to do is find the font, selects it and insert the code into the head and your title will be changed in no time. Wordpress + Dynamic Image ReplacementIf you are a Wordpress user looking for dynamic image replacement solution for the title or even the content of your blog, chances are there are plugin for them. Here are some text replacement plugins we come to know about. sIFR Wordpress Plugin – WP sIFR Cufon Wordpress Plugin – WP-Cufon Facelift Image Replacment (FLIR)Wordpress Plugin Font Burner Control Panel
     |
| You are subscribed to email updates from hongkiat.com To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
No comments:
Post a Comment