Problems With line-height - 4

Second in the Ahem Series of CSS tests

This page tests the inline formatting model (inline boxes, line boxes, and so on) in the ways that it affects line-height and font-size.

Prerequisites
Browsers that are subjected to this test should support CSS font-size, line-height, vertical-align, inline styles and classes.
You should download the excellent font "Ahem" to complete this test. The "Ahem" font was designed by Todd Fahrner to test CSS implementations of font-size. There are three versions: one for Windows (TrueType), one for Unix, and one for Mac.

Warning. The "Ahem" font is not yet installed correctly! Please install it before continuing with this test!

1. Background With No Text

The box below should start one pixel below the line marked '0' on the ruler. It should be exactly 100px high. Its width should be 100px too..

 

The following test should look similar, except that since we are using a different width, it could be of a different height, since the computed max-ascent to max-descent could be different, and its that that gets coloured. However, there shouldn't be any more or less ruler visible.

 

2. Image With No Text

The image below should start one pixel below the line marked '0' on the ruler. It should be exactly 100px high.

I

The following test should look absolutely identical. Even though we are using a different font, it has the same font-size.

I

3. Background With Text

The boxes below should start one pixel below the line marked '0' on the ruler, and should be flush with the ruler. They should be exactly 100px high.

 pXÉ 

The following test should have the same height of of ruler. However, the background may be more or less. If the glyphs spill out of the background, then that is fine, because it is a different font.

 XpÉ 

4. Baseline Verification

All text below should have the same baseline. However, the coloured bars will almost certainly not line up or be the same height — each character will have their box up or down a little compared to the others because each font's baseline is probably not the same distance from the font's bottom and the font's top, and each font has different max-ascent to max-descent length. This means that overall, the line will be taller that 100px.

ÉÉÉÉÉÉ

Submit Results

How does your browser fare on this test?

Up to the Evil Tests Page.

Bugzilla: Bug 4234

Last updated in May 1999.