font-family for the first box is
Arial, Helvetica, Helv, sans-serif;, the second is
New Roman", "Times Roman", Times, serif;.
Some other variants of this test are available.
Here are some views of this page in various browsers. In my opinion, it is most important that all the results for a given browser (with the possible exception of "size of image" be the same. That is, I think consistently using the operating system font size is better than mixing the CSS font size and the operating system font size.
|Browser (link to image)||Platform||Size of Font||Size of Text Background||Size of Image*||line-height|
|Reference rendering||see Mozilla bug 13072||C||C||C||C|
|Mozilla, 99-05-05||Windows 95||O||O||C||O|
|Opera 3.60||Windows 95||O||C||C||C|
|MSIE5, with image||Windows 95||O||O||C||O|
|MSIE5, without image||Windows 95||O||O||N/A||C|
|Navigator 4.05||Digital Unix||O||M||B||B|
|Navigator 4.50||Linux||O||M (103px)||B||B|
|Navigator 4.50||Windows 95||O||O||B||B|
|Navigator 4.05 and 4.51||Macintosh||O||O||B||B|
* - This wouldn't change even if font-size were redefined the operating system way.
|C||CSS meaning of font-size|
|O||Operating system's or font's meaning of font-size †|
|M||Mixed, i.e., somewhere between C and O|
|B||Buggy in other ways|
† For properties other than font size, O means that the OS definition has been carried over to this property. If the OS definition of font-size is used (which is bad), it is probably better to carry over that definition to everything else based on the font size. That is, if font is O, then it is probably better if line-height, image size, and size of text background are also O, rather than C.
the size of the font when set solid.This means that the height of the font is the distance from the highest point in the highest glyph to the lowest point in the lowest glyph. Windows and other operating systems seem to use the height based on an em square that does not include the whole font size. This results in fonts that are larger than they would be were the CSS definition used. Ohen the CSS definition is used, the separation of the highest points on the glyphs and the lowest points on the glyphs should be exactly
100pxtall, the background of the inline elements should also be 100 pixels tall. (If the font is bigger, however, it is reasonable that the background be bigger as well.)
emunit is defined in CSS2 as
the font-size of the relevant font. This means that
1emwithin a font with font-size
100px. Thus, according to CSS, the size of the image should be 100px. However, if the real font size used is larger, the image should probably be larger as well.
line-heightproperty are defined in CSS2 as setting the
line-heightto the number times the font-size (so that the number is inherited, rather than the computed value). The end result of the rules for inline boxes is that a line height of 1, with no larger text, larger images, or unusual vertical alignment means that the baselines of the text should be separated by exactly the computed value of the line-height. This means that the highest points on the glyphs should exactly touch (and not overlap) the lowest points in the glyphs on the previous line (assuming I have chosen characters that reach the highest and lowest points in the font). Similarly, the images on adjacent lines should exactly touch each other. They should not be separated, nor should they overlap.
These inconsistencies even within the various operating system
font mechanisms are a
serious obstacle to quality typesetting using CSS. The careful
work that has gone into developing the
property will not have any benefits if font sizing is not
treated consistently. There must be a cross-platform consensus
on the meaning of
font-size that is consistent
with all of the things that depend on font sizes. Again, if
the real font size is larger, the line-height probably should
be too, even though the spec doesn't explicitly say that the actual
value of numbers on
line-height should be
based on the actual (rather than computed)
value of the font size.)
Thanks to Roland Ericsson and Ian Hickson for comments and to Liam Quinn for Linux screenshots and Steve Mulder for Mac screenshots. However, the views expressed here are mine alone.
(Back to Font Information, CSS Information, David Baron)
LDB, email@example.com, 1999-05-01, 1999-11-26