SIFR Newbie: font display problem in non-flash browsers

Question

Hi, I'm wondering if someone can help me with this as I'm fairly new to siFR and think there is something essential i'm not comprehending in the documentation.

I'm having success using siFR 3 (r436) to render fonts and it's working just how I want. However if I turn flash off in any browser the original (no longer rendered) html text displays very badly indeed. I thought that in any non-flash browser my inital stylesheet would be referred to and not siFR.css and I would be able to adjust the html text as a seperate entity. I think i probably developed this bad idea because I remember in earlier siFR versions you had to mess around alot with stylings on the original stylesheet + the sifr-config so you would get corresponding line heights/widths etc between the html and rendered font. (i realise that siFR 3 renders the flash in a different way)

So it seems that siFR.css controls both the non-flash text and the rendered font.

Anyway my essential noob questions is: how do i get the the original html text to have the same dimensions as the rendered font?

thanks for you help

Answer 1

sIFR scales up the flash object to match the original font size. The limitation is that your flash text size has to be bigger than the original text. Use a flash font that matches the metrics of your browser font as closely as possible.

In the CSS, you need to know about the .sIFR-active. When you use:

sIFR.replace(cochin, {
  selector: 'h1'
});

All the <h1> elements will be replaced with flash text and the .sIFR-active class is added. The purpose is to control how elements are styled when sIFR is active. Particularly, when sIFR is active visibility is set to hidden.

When flash is off, sIFR is not enabled but according to what you described, you seemed to have written css rules that only match elements with the sIFR-active class.

See sIFR wiki, How to Use and Styling parts.