Problems With line-height - 3

First 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.

1. Elementary

The test pattern below should be exactly square, with a chess board pattern inside. There should be no gaps between the lines or between the characters, it should not be squashed, etc. An example of correct behaviour is shown to the right of this paragraph.

2. font-size

If font-size is interpreted correctly, then a glyph from the "Ahem" font at 100px will be exactly 100px high.

X

Two glyphs one on top of each other, with line-height set to 1.0, should stack like boxes and become 200px high.

X
X

3. Background

If a glyph has a background, then it should fill the size of the font. Hence below there should be alternating blue and green squares, on a white background. There should, in total, be three perfect blue squares. There may or may not be a green square at the end. I would say that there should not be, as it looks tacky.

4. Image sized by 'em'

One 'em' is exactly the font-size. The picture below should be exactly 100px high, and should thus be flush with the surrounding black blocks.

XX

The picture below is resting on the baseline and is 0.8em high. The Ahem font has an above:below the baseline ratio of 8:2. The image below should thus be exactly 80px high, and should be flush with the surrounding black blocks (they are És, which in the Ahem font are blocks only above the baseline).

ÉÉ

The next one is 0.8em high but top aligned.

ÉÉ

Now we look at bottom aligned boxes. These are 0.2em high, but first aligned with the bottom of the line box, and then aligned -0.2em from the baseline. For the small boxes from the Ahem font, I've used the "p" glyph.

pp

pp

5. Zero Line Height

These tests are new, if you spot any problems with them then please tell me!

In the test box below, there should be nothing. In fact, it should only appear as a thin line across the viewport.

In the test box below, there should be a single aqua line, 110 pixels tall and 10 pixels across. The box should be exactly the same height as the previous one because the inner div contains only a single span, and that span has a line-height of zero, and the div contains a line-height of zero too. In other words, the text box should really just be a solid line spanning the viewport again.

The visible line should come from the border of that empty inline element (span) with a line-height of zero and a font-size of 100px. The bar should come straight out of the top of the box, possibly going under this paragraph.

The following test should be identical to the previous one with the exception that the aqua bar should this time be recognisable as a border, which is a lot wider (100px wider to be precise) thus resulting in a square border 110px to a side. At the bottom of the box there should be a solid green bar. The border should stick out of the top of the `box' (well, bar), going under this paragraph, and the green bar may stick out of the bottom of the box a bit. The box should again be exactly as wide as the first box in this section, though.

The following test should look absolutely identical to the previous one. The only difference is that now we have more than one line in the markup, but since the line height is zero, this should have no noticeable effect. There should be no red visible in the following test, only the green bar with its aqua border as before.

The following test box should have the same height as before (i.e., zero), as should the aqua border, but this time the aqua border should be filled all in green, not just a small bar at the bottom.

6. Less Than One Line Height

In the test below, there should be a solid green square, exactly 100px to a side. The height of the test box should be only 4/10th of the font-size, i.e. 40 pixels. A ruler is present to measure this.

In the test below, there should be another green square, but the top 2/10th of it should be a different shade than the bottom 8/10th. It is actually the same test as the previous one in this section, but just with different colours to aid debugging.

In the test below, there should be two solid slabs of green, separated by a block of transparency (probably white). The two slabs should appear at the top and bottom respectively of a brighter green box surrounding them. The containing block should be 160 pixels high, and a ruler has been placed to let this be measured.

In the following test, there should be a single rectangular green block with a thick lime green border. The container box should be exactly 180px high according to the ruler and the border and green block should extend outside the test box.

The following test is similar, the height here should be exactly 100px.

The following test is similar, the height here should be exactly 60px.

The following test is similar, the height here should be exactly 20px.

The following test is similar, the height here should be exactly 10px.

Submit Results

Up to the Evil Tests Page.

Bugzilla: Bug 4234

Last updated in May 1999.