Advanced Facelift Techniques - 3 Options Examined
Facelift offers several options to handle many different situations. In this post, we will take a look at a few options that may be useful to your situation. In this post realFontHeight, findEmbededFonts, and checkImageSupport are covered as well as a slightly more in-depth look at the FLIR.init function.
The following options are all disabled by default, but can be easily enabled if needed.
realFontHeight
First, the realFontHeight option. All fonts have something called a baseline. The baseline is the an imaginary line that the text sits above. However, some letters dip below the baseline like the “p” or “y”. As you can see in the previous sentance, the tails of those letters dip well below the bottom of the “o” in “or”.
By default, Facelift will trim all generated images to the baseline unless there is a letter that dips below it. This will cause things like navigation links to not be lined up or multi-colored headers to sometimes seem off. Some images will be higher up than others. realFontHeight will make sure all generated images keep the same height and that the baseline will line up. View the realFontHeight doc page.
To use realFontHeight you will have to set the option inside a FLIRStyle Object. For example:
FLIR.init( new FLIRStyle( { realFontHeight:true } ) );
Or, if you are setting FLIR options using the init function:
FLIR.init( { your_flir_options }, new FLIRStyle( { realFontHeight:true } ) );
findEmbededFonts (available since v1.2 beta 3)
Browsers are now starting to support the CSS property font-face. The font-face property allows designers to embed alternative fonts into their websites. However, support in the browsers is very limited at this time.
When enabled, Facelift will discover all font-face declarations in your stylesheets and cache their names. If Facelift comes across an element with a font that has been declared it will not replace it. This allows website owners to take full advantage of font-face and let Facelift fill in the gaps for browsers that do not yet support this great feature.
To use findEmbededFonts:
FLIR.init( { findEmbededFonts:true } );
checkImageSupport (removed, see Update below)
UPDATE: Removed in v1.2 beta 4. You can now get this functionality by using the DetectImages Javascript plugin that is included with the Facelift download. See an example at the detailed examples page.
For whatever reason, some users may have images turned off in their web browser. When Facelift is in use with browsers configured this way, certain browsers will display ugly boxes instead of images or text. By enabling checkImageSupport you can check for this, and Facelift will not replace any elements.
To use checkImageSupport:
FLIR.init( { checkImageSupport:true } );
A note about FLIR.init()
FLIR.init must be run first before any other FLIR functions are called. You have three different options for calling FLIR.init. The first:
FLIR.init();
This will cause all the defaults to be used.
The second allows you to set FLIR core options like checkImageSupport.
FLIR.init( { checkImageSupport:true }, new FLIRStyle({ optional_flir_style }) );
The optional FLIRStyle will be used as the default FLIRStyle when replacing elements. You do not have to specify it and if you don’t the defaults will be used.
The last way is to just declare the default FLIRStyle
FLIR.init( new FLIRStyle({ default_flir_style }) );
