Font Sizing with sIFR
Font sizing is the most difficult part of using sIFR. In this post, I’ll discuss how the algorithm in sIFR 2 works, or rather, why it doesn’t work as well as originally intended. Coincidentally, this makes this post an excellent tutorial for font tuning in sIFR 2. We’ll also look at how things will be improved with sIFR 3.
sIFR 2
The algorithm used by sIFR 2 is relatively simple:
- Take the width and height of the element you want to replace.
- Create a Flash movie which uses these dimensions.
- Increase the font size from 6 pixels, pixel by pixel, while rendering the text, until the height of the text is larger than the Flash movie.
- Render the font with a size one pixel smaller than obtained in (3).
Unfortunately this doesn’t quite work. First of all: the font used in the Flash movie may be wider or smaller than the font used in the HTML. Let’s say the font is wider, what will happen then is:
- Because the font is wider, it will wrap to a new line earlier than the HTML font would.
- This allows for the possibility that the text will reach the allowed height earlier, resulting in a smaller font size (see point 3 above).
A way to deal with this is to set the letter-spacing of the HTML text so the font appears to be wider, having the effect of giving it the same width as the Flash font. This works, assuming that there are no other factors influencing the width and height of the text, such as (unintentionally) using different fonts on different user machines. Default browser settings for CSS properties like font-size or letter-spacing can be of influence as well.
In short, achieving cross-browser and cross-platform consistency of the width and height of the text, while taking into account the width of the font used, can be very, very hard.
sIFR 3
In sIFR 3, things will work a little different. For starters, the font size is no longer determined by the width and height of the text. Instead I’ve figured out a way to derive the font size from CSS. Here is a short version of the rendering algorithm employed by sIFR 3:
- Determine font size and the number of lines the text takes up.
- Create a Flash movie using the width and height of the text, these can be changed later.
- Render the text.
- If the text is wider than the allowed width, try wrapping it to the next (or a new) line.
- If a single word is causing the text to be too wide, resize the movie.
- If the text now requires more lines, resize the movie.
Resizing the movies requires Flash to talk to the JavaScript code in the website. Since we’ve dropped Flash 6 support, this has now become possible.
Specifying the desired font size in Flash is quite easy as well. All it takes is two properties!
.sIFR-hasFlash h1 {
font-size: 12pt;
line-height: 1em;
}
Why the line-height? sIFR uses the line-height and the height of the element itself to calculate how many lines the text uses. By using line-height: 1em; we ensure it has the same value as the font size. As Eric Meyer said:
(…) for line-height, em-based values are calculated using the computed font-size of the element itself. I declared the font-size directly, so we know its computed size in pixels.
It also turns out that if you specify line-height in ems, and don’t specify it in the descendent elements, they will have the same line-height:
So that computed value (…) is what’s passed on to the descendent elements. (These) elements will inherit (the same)
line-heightvalue. End of story. They don’t change it based on their own font sizes; in fact, they don’t change it at all (sic).
Concluding
sIFR 3 will bring easier font tuning, as well as other features I’ll talk about later. You can see the original font tuning experiments, as well as a demo of the current stable SVN export.
Works all fine for me (IE7, FF, Safari, FF Mac)
thank you for that nice improvement, it is indeed easier just to worry about the css and nothing else ;)
Cheers
Marcos Peebles | 8 March 2006, 13:17 | link
Good to see sIFR 3 is making a good solution even better in this regard..
Lawrence Meckan | 9 March 2006, 02:45 | link
I really like the way sIFR2 works, but the font sizing issue prevents me from using it more often. As a graphic designer I’m quite picky about my fonts and being able to implement and enforce proper sizing/kerning/leading would be super. Your font sizing and CSS-font control sound excellent. I have experimented somewhat successfully with v2 for replacing both headlines and paragraphs and don’t see enough of a performance hit NOT to use it, especially if you carefully pick size and font to render well.
Thanks, and please keep up the good work! I’ll be playing with the alpha 3.0 code if I get a chance soon…
Jason D. | 11 April 2006, 19:46 | link
Have you also managed to fix the fact that the elements sIFR replaces must have a parent element with a size of 1em or they show up at the Flash movie’s original size?
jordan | 21 April 2006, 02:24 | link
I wasn’t aware of such a problem… could you elaborate?
Mark Wubben | 21 April 2006, 07:57 | link
It was my mistake; in fact, the problem is caused by specifying a line-height on body or html. It can be inline (i.e. font: 1em/1.4em sans-serif) or as a separate declaration (line-height: 1.4em;).
The unusual part is that proper space is allocated for the sIFR’d text, but the actual font-size used is whatever was specified for body/html element’s line-height.
I’ve put a testcase up on my server here.
jordan | 23 April 2006, 23:50 | link
Ahh, yes, that could happen. As said in the article, step 1 for sIFR 2 is:
So if the line-height is the height of the element, it’ll also be the font size. In fact, for compatibility issues this is currently true for sIFR 3 as well.
Mark Wubben | 25 April 2006, 15:52 | link
(…test…)
Mark | 10 May 2006, 20:24 | link
I have a problem were in IE 6 the SIFR font size is different ten in FF. Do you know how to fix this?
WIm | 14 August 2006, 15:49 | link
If you are using sIFR 2, it needs better tuning. If you are using sIFR 3 alpha, try a nigthly.
Mark Wubben | 18 August 2006, 06:43 | link
Any update on sIFR 3. Its been more than a year in development.
(Or have i missed something.)
Fahed | 26 March 2007, 11:39 | link
Work is still in progress. There’s a beta and subsequent releases.
Mark Wubben | 26 March 2007, 15:33 | link
Negative line-height (e.g. -1.4em) doesn’t seem to work for me. I’m using sIFR 3. Has anyone else got this to work - or is there a workaround?
Editor's note – This is already being discussed in the forum
Gareth Evans | 2 November 2007, 18:44 | link
Is it possible to specify multiple font sizes within one instance?
I want to use sIFR to display block quotes in a large size, but I’d want the attribution to be smaller. Is this possible? How would you do it? For maintenance reasons, ideally, I’d only have one instance (one SWF).
Thanks!
Editor's note – This too is already being discussed in the forum
Lee | 2 November 2007, 20:56 | link