sIFR 3: Experiments: Tuning: Deducing line-height

Deduces the line-height by setting the content of the node to “X”. Calculates the height of the text in pixels (called workingHeight, the offsetHeight minus top and bottom padding and border) and the number of lines the text uses. font-size and line-height have the same value for each test, padding is 16px, the default value of a 1em line-height on my system.

Comparisons between Mozilla Firefox 1.5, Safari 2.02 and Opera 8.5 show that workingHeight = offsetHeight - paddingTop - paddingBottom - borderTop - borderBottom = lines * line-height. The Flash script only needs to know the number of lines and their height to render the text. This means that for tuning the font will be rendered with equal font-size for all elements subject to equal CSS rules. Width, however, is still an issue. If the text is wider than the allocated space on the page, it'll have to be wrapped. This could work quite well, however it might mean that the Flash will need an extra line.

This method, while working in IE, is not necessary for that browser as line height is deduced in another way already. See Deducing line-height in IE for more information.

Test subjects

This text normally fits on one line

This text normally fits on
two lines

This text normally fits on
two lines, with extra padding of two lines worth

This text normally fits on
two lines, with extra padding of four lines worth

This text normally
fits on
three lines

Output