Problems With line-height - 6

Fourth 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, and should implement the inline box model as described by David Baron..

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.

1. Baseline Alignment of the Root Inline Box

See David's explanation of this.

The above should look like this reference rendering, to the pixel:

The following is another version of this test but on multiple lines.

2. Multiple fonts in an inline

See David's explanation of this. Note that this relies on font-size being interpreted correctly in the first place, see Line Height 4, Part 4 to makes sure that your browser gets that right first.

In the following test case, there should be no background around the first black square (half the black rectangle), but the background for the second and third glyph should be slightly bigger than 100px to accommodate the differences in baseline positioning between the two fonts. The last glyph (the second β) should have the background it needs to cover its max-ascent to max-descent area, which may be different from the background covering the second half of black and the first beta.

I'll provide a reference image once a browser gets this right!

Submit Results

Up to the Evil Tests Page.

Bugzilla: Bug 24495

Last updated in May 1999.