Search code examples
javascriptsifrloadingflir

FLIR: avoiding ugly page loads

I'm building a site that makes extensive use of FLIR to allow the use of non-websafe fonts. However, pageloads are an ugly process, as first the HTML text version of each field loads and then (a few hundred milliseconds later) it's replaced by its FLIR image counterpart.

Is there any way to avoid this sort of thing? I've got a client presentation in a few hours and I know it'll raise eyebrows. My situation is sort of related to this question which is in regards to sIFR, not FLIR. Any ideas?

Thanks,

Justin

Solution

  • Try putting the following rules into your stylesheet:

    .flir-replaced{text-indent:-5000px;}
.flir-image{display:block;}

    You may have to modify your other FLIR-related CSS rules to account for the fact that the generated images are now vertically aligned to the top of their respective parents.