Re: [css3-text] CSS3 suggestion for text-underline

On May 18, 2010, at 8:31 AM, Boris Zbarsky wrote:

>> "Should" according to what? Some principal of typographic purity?
> 
> The "make it look good and readable" principle, sorta.

Well that is what I want too, and I think it looks better on the page when the underlines do not fatten up or change distance when the text gets bigger.

> 
>> When I am designing Web pages for computer monitors, I virtually always want the underline to be a single pixel in thickness
> 
> A single device pixel?  On some of the monitors I have lying around here that wouldn't even be all that visible.  Or do you mean single CSS pixel?

CSS pixel. A device pixel would be kind of silly when printed.

>> (especially when used for hyperlinks). Even if I wanted a bigger underline for larger letters (I never actually have, btw), I would want it to be an integer number of pixels thick.
> 
> Integer number of pixels seems reasonable; I believe Gecko does that in fact.
> 
>> As for position, I would much rather it be in a consistent position across different fonts or sizes on the same line.
> 
> In what situation?  If you have:
> 
>  <div>
>    <span
>     style="font-size: 10px; text-decoration: underline">Some</span>
>    more
>    <span
>     style="font-size: 30px; text-decoration: underline">text</span>
>  </div>
> 
> you expect the underlines to line up?  

Yes, I do.

> Even if that means that either the "text" looks terrible or the "Some" looks terrible?

They line up in Webkit, and do not look terrible. In fact, I think Firefox looks worse. Firefox does keep the underline the same size when the underline is assigned to the parent element, but then the thickness is also based on the parent element, when most of the time I would prefer a 1px underline, as in Webkit:

<a style="font-size: 50px;">
   S<span style="font-size: 10px;">ome 
   more text</span>
 </a>

In Firefox, this feels like a hackish way to get a thick bar drawn underneath small text.