Text-decoration and sub/sup elements

I have been investigating the use of underline with <sup> and <sub>
elements. In particular I have been trying to find out at what position the
underline (overline or line-through) are drawn for elements offset from the
baseline of the element that set the text-decoration.

I noted that IE6 (Win32), Mozilla 1.1 Alpha, Netscape 7-PR1 all do the same.
They draw the baseline relative to the element itself rather than the
element that introduced the text-decoration. Opera 6 on the other hand does
draw the text-decoration relative to the element that introduced it (i.e. it
renders one contiguous line as opposed to two disconnected and offset
lines). I used the following simply test:

<html>
<head>
</head>
<body>
<h1>sup</h1>
<a href="something.html">Some text<sup>super</sup></a>
<h1>sub</h1>
<a href="something.html">Some text<sub>super</sub></a>
</body>
</html>

I noted that this has been discussed before in [1] but when I checked CSS2.1
and CSS3 I didn't see any text that would clarify which approach to take. I
did however notice that in CSS3 there were some examples that would be in
line with Opera's interpretation, see [2] section 9.1. In reading the CSS2
spec. I came to the conclusion that the element that introduced the
text-decoration also determined the position, color and thickness. It
explicitly calls out that the color is set by the element that introduces it
- and from that I inferred that it applied to position and thickness as well
as it would otherwise be impossible to do what is done in the examples in
[2] section 9.1.

So finally - I'd like this clarified in CSS2.1 and also in CSS3. It seems
that there was also a suggestion in [1] that didn't get any feedback - that
it should be possible to turn off text-decoration from a parent element.
This might be a convinience for the author though it is possible to achieve
the same effect by simple encapsulating text in spans and setting
text-decoration appropriately. It would be good to add this to CSS2.1/CSS3
so it is clear to the author how one should approach the problem when trying
to turn off text-decoration.

E.g.

From [1] it is suggested that:

<span style="text-decoration: underline; color: red">Some underlined text 
<span style="text-decoration: ~underline">with non-underlined text</span>
in the middle</span>

Using CSS2 this could be achieved by just nesting spans appropriately:

<span style="color: red">
<span style="text-decoration: underline">
Some underlined text </span>
with non-underlined text
<span style="text-decoration: underline">in the middle</span>

Comments?

- Jacob

[1] http://lists.w3.org/Archives/Public/www-style/2000Mar/0105.html
[2] http://www.w3.org/Style/Group/css3-src/css3-text/#text-decoration

Received on Friday, 14 June 2002 14:33:49 UTC