Core CSS: 2nd Edition, from Prentice Hall. | 9

Core CSS: Chapter 11: Text Properties: Extensions

TEXT-UNDERLINE-POSITION PROPERTY

The text-underline-position property does exactly what you would think it would do: allow you to set the position of an underline in relation to some text. It is meant to be used in conjunction with text-decoration: underline, which sets the line to the text. You might think that there would only be two values, but in fact there are four: above, below, auto and auto-pos. The first two are self-explanatory and were first introduced in Internet Explorer 5.0, with below being the old default; but the auto and auto-pos values were only introduced with the launch of Internet Explorer 6.0. The auto value is the new default value, which sets the line underneath Western text, and has the added flexibility over the below value to sets it to inline if the text setting for the page is explicitly set to Japanese, and writing-mode is set to tb-rl. The auto-pos value is functionally equivalent to auto.

Listing 11-11 shows the various values of text-underline-position put to the test. The results of this code can be seen in Figure 11-12.

Listing 11-11 text-underline-position Sample Code 
<html>
<head>
<title>text-underline-position Example</title>
<style>
p {text-decoration: underline; font-size: 20pt; font-weight: bold; font-family: arial}
</style>
</head>
<body>
text-underline-position: above
<p style="text-underline-position: above">
The quick fox jumped over the lazy dogs.
</p>
text-underline-position: below
<p style="text-underline-position: below">
The quick fox jumped over the lazy dogs.
</p>
text-underline-position: auto
<p style="text-underline-position: auto">
The quick fox jumped over the lazy dogs.
</p>
text-underline-position: auto-pos
<p style="text-underline-position: auto-pos">
The quick fox jumped over the lazy dogs.
</p>
</body>
</html>

Figure 11-12: The effects of the text-underline-position values displayed in Internet Explorer 6.0.

CSS3 and text-underline-position

The addition of the auto and auto-pos values are taken from what is arguably a better-thought-out way of handling underlines that was proposed in the CSS3 text module. The original above and below values for this property made sense when applied to Western character sets, but made little sense when applied to vertically-aligned Asian text.

The auto-pos position is available in Internet Explorer because it is the default value under the CSS3 text module for this property. In addition to the auto-pos value there are three others: before-edge, after-baseline and after-edge. All of these values are set relative to an "EM box", which is the virtual, vertically-aligned "block" that surrounds Asian characters on a page. When before-edge is used, the underline will appear before the edge of the EM box containing Asian characters. If after-baseline is set, the underline will appear after the baseline of the characters, and may end up cutting across any descend-ers (i.e. the parts of letters that "dangle", like the lower parts of the letters y, g, p and q). The after-edge property sets the underline to appear after the edge of the EM box, and is designed not to cut across any descenders.

Created: March 27, 2003
Revised: August 19, 2003

URL: http://webreference.com/programming/corecss/2