Re: Text-decoration

>Where exactly should the various text-decorations be
>drawn?

   I'm going to leave most of this to the people who helped write CSS1, but
I'd hazard a guess that some of the "inexactitude" you discovered was left
there on purpose.
   However, there is one question I can answer with confidence:

>T-d spans descendant elements, but is not inherited.
>
>Given
>P {t-d: underline; font: 14pt/18pt Arial}
>    and:
>P SPAN  {font: 12pt}
>
>[...zap...]
>
>... the t-d is placed at an appropriate place
>for 14pt, which will be wrong for 12pt, but since the
>property is not inherited, the place for 14pt will be
>the place that must be used, and thus it will not
>underline the SPAN, but wil sort of line-through it.

   I'm not sure whether this effect will happen using the above markup-- I
suppose it does depend on where the decoration is actually drawn-- but
given 'traditional' underlining (drawing the underline on the font's
baseline) and:

   P SPAN {vertical-align: -50%;}

...you're exactly correct.  Consider this:

   P.cl1 {text-decoration: underline;}
   P.cl1 EM {vertical-align: -50%; text-decoration: line-through;}

Depending on the font used, and the 'font-size' and 'line-height' of the
various elements involved, it is quite likely that the line-through of the
downward-shifted EM element will precisely line up with the underline of
the paragraph.  Even if they don't align, they'll be very close to each
other.
   Similarly, the line-through will probably align with the paragraph's
decoration in this scenario:

   P.cl1 {text-decoration: overline;}
   P.cl1 EM {vertical-align: 50%; text-decoration: line-through;}

This is why the color of an underline stays the same, even when descendant
elements have different colors, UNLESS those descendants also have
underlines set for them.  See:

   http://www.w3.org/Style/CSS/Test/current/sec543.htm

...with Opera 3.6 or any recent build of NGLayout.  Navigator 4.x and
Explorer 4.x/5.x get this test wrong, so using them to view the test won't
help.

--
Eric A. Meyer  -  eam3@po.cwru.edu  -  http://www.cwru.edu/home/eam3.html
 Editor, Style Sheets Reference Guide  http://style.webreview.com/
 Coordinator, W3C CSS Test Suite       http://www.w3.org/Style/CSS/Test/
 Member, WSP CSS Technical Committee   http://www.webstandards.org/

Received on Wednesday, 24 November 1999 09:43:18 UTC