CSS Underlining

If you have any comments to make regarding this test, e-mail ian@hixie.ch.

Prerequisites
Browsers that are subjected to this test should support CSS1's text-decoration property.

1. Simple

Below, the underlining should be green, the text blue.

blue text, green underline

This should look the same:

blue text, green underline

2. Size

Below, the underlining should be green, unbroken, of the same size. The text will vary in height, boldness, and so on. The underline should be the same distance from the base line of the first piece of text (which is repeated through the test, it reads "Green Text"). It shouldn't follow the baseline of each inline.

Note that this is a very tenuous argument. It stems from the statement in the spec which reads This property is not inherited, but descendant boxes of a block box should be formatted with the same decoration, implying that the underline is actually the underline of the parent element that affects children, and not the underline that is applied (as if the property was inherited).

Following this line of thought generates much nicer looking underlines, as it is not broken everything the text gets bolder, and so on.

Green text. Blue text, green underline. Green text. Big red text, same green underline. Green text. Bright purple bold text, same green underline. Green text. Blue text moved down 0.5em, same green underline (should slash through the text). Green text.

This is the same test, with overline:

Green text. Blue text, green overline. Green text. Big red text, same green overline. Green text. Bright purple bold text, same green overline. Green text. Blue text moved down 0.5em, same green overline (should be a big 0.5em gap between top of text and overline). Green text.

This is the same test, with strike-through:

Green text. Blue text, green strike-through. Green text. Big red text, same green strike-through. Green text. Bright purple bold text, same green strike-through. Green text. Blue text moved down 0.5em, same green strike-through (should simply overline the text). Green text.

3. Pictures

The underline should span through the picture below, under the cat's paws:

This image should be ...during... underlined.

However, in the following case there should be no underline under the image:

This image should not be underlined. ...during... Not at all.

Similarly here -- in the following case there should again be no underline under the image:

This image should not be underlined. ...during... Not at all.

4. Combos

The text should be green, the underlining purple, and the overlining blue.

This text should be green with fuchsia (bright purple) underlining and blue overlining.

The text below should have a double underline, one fuchsia and the other blue. This is based on that same CSS spec quote: This property is not inherited, but descendant boxes of a block box should be formatted with the same decoration. I assert that this means that the underlining spans all children, and so if one of the children is explictly underlined too, it would have both underlines.

(purple text, single purple underline) This text should be green with fuchsia (bright purple) and blue underlining. That is, the text should be underlined twice. Make sure this also happens on continuation lines. (purple text, single purple underline)

Make sure the double underlining continues on the second line!

It is the same argument which causes the double underlining as allows the underlining and overstriking to occur simultaneously. In the case of the underlining, the main text is moved up a bit by using the vertical-align property. This assumes that the underlining is based at a certain distance from the baseline of the text on which it is set.

5. Over and Through

In the following text, the lines should be balanced so that the underline, for example, is never heavier than the overline. This is a matter of taste, really. Oh well. For comparison, the tests are all on the same line.

This is bold. The lines may be bold too. This is not bold. The lines should not be either. This text is bold but the lines should not be.

Here, the underline and overline should be normal, but the line in the middle may be thicker. The text should in any case be bold:

This text is bold, and the middle line may be heavier than the outer lines.

Here, the underline, overline and middle line should not change weight where the text goes bold:

This text is partly bold, but the lines should not change.

Here is an odd one -- below, only the text should blink, the lines should remain in place even when the text disappears. Note that if the text does not blink at all, you may ignore this particular subtest as blink is explicitly specified as an optional feature.

This text may blink, but the lines should not.

6. Visibility

An extension of this principle (that underlining affects all children simply by "being there" rather than through an act of the children themselves) is that if a child is hidden, the underlining should remain.

First, what it looks like with everything visible:

Green text. Blue text. Green text.

Now, hiding the inner span:

Green text. Green text.

Logically, only the text should have disappeared, leaving the underlining where it was. Ignore this test when reporting results if the blue text did not dissapear, since that would mean visibility is not implemented.

Finally, let's blink the middle text:

Green text. Blinkin' Blue text. Green text.

The underline under the blue text should remain, even when the blue text disappears for a blink!

Note. If the text is not blinking, then ignore this final test. Blink is explicitly specified as an optional feature.

Submit Results

How does your browser fare on this test?

Up to the Evil Tests Page.

Last updated in May 1999.