[css3-text] Adjacent and nested underlines (was Allow control of text-decoration width

Hi Aryeh,

I'm glad that you agree with CSS model of thickness and positions, and you're raising another point. Do I understand correctly? Please correct me if I'm wrong. In order to track separate issues properly, I'm changing subject.

> E.g., these three snippets should all be visually indistinguishable:
> <u><big>A</big><span style=color:red>B</span><small>C</small></u>
> <u><big>A</big></u><u><span style=color:red>B</span></u><u><small>C</small></u>
> <big><u>A</u></big><span style=color:red><u>B</u></span><small><u>C</u></small>

This is a very interesting point we edited the spec recently. There was a request from Chinese to split adjacent underlines visually[1]. The request was to add a new value, but instead, we chose to put following text in the spec[2]:

> The UA should place the start and end of the line inwards
> from the content edge of the decorating element so that,
> e.g. two underlined elements side-by-side do not appear
> to have a single underline. (This is important in Chinese,
> where underlining is a form of punctuation.)

Your 2nd example, adjacent underlines, contradicts with this request.

The 3rd example, nested underlines, is even more interesting. I tried to read expected behavior from the spec without much luck. I guess the underlines should split, just like adjacent underlines, but I'm not sure.

CSS3 Text is still a working draft and the above paragraph was added only a few months ago, so I suspect no browsers have implemented this yet. But if they do, it breaks your use case.

Couldn't HTML editors merge two adjacent <u> elements when needed?


Regards,
Koji

[1] http://lists.w3.org/Archives/Public/www-style/2010Dec/0102.html

[2] http://dev.w3.org/csswg/css3-text/#line-decoration


-----Original Message-----
From: simetrical@gmail.com [mailto:simetrical@gmail.com] On Behalf Of Aryeh Gregor
Sent: Friday, April 08, 2011 3:06 AM
To: Koji Ishii
Cc: www-style@w3.org
Subject: Re: [css3-text] Allow control of text-decoration width

On Wed, Apr 6, 2011 at 11:34 PM, Koji Ishii <kojiishi@gluesoft.co.jp> wrote:
> It depends on how you define "what users will expect". Try MS Word and you will find it behaves exactly what I said; i.e., the same way CSS behaves. That is one way to define "what users will expect".

Word seems to make the underline on two adjoining characters always the same height and thickness, but not color (it follows the color of the letter it's under).  I agree that the way Word works is good.  In Word, it looks like each letter is either underlined or not, as a binary per-letter property.  But to determine underline height and thickness, it looks at an entire run of underlined text at a time, and draws the same height and thickness for the whole run.

This is kind of how IE9 seems to do things, except for the color.  If color followed the text where the underline was drawn, and everyone followed IE's lead in placing underlines consistently for a single run of text depending on the font and size of the underlined text instead of the font and size of the element with the text-decoration property, I'd agree that that would be ideal behavior.

So in particular, changing which element actually has the text-decoration property should never change the height, thickness, or color of the underline on any letter, as long as the same set of letters are underlined.  E.g., these three snippets should all be visually indistinguishable:

<u><big>A</big><span style=color:red>B</span><small>C</small></u>
<u><big>A</big></u><u><span style=color:red>B</span></u><u><small>C</small></u>
<big><u>A</u></big><span style=color:red><u>B</u></span><small><u>C</u></small>

That's what I think is the most reasonable and correct behavior.
Otherwise you have appearance changing based on the exact positioning of the <u>s, which is invisible to users of WYSIWYG editors.  Plus, different-thickness underlines on adjacent letters look ugly, and I doubt people really want them under normal conditions.  An underline that's a different color from the text it's under also looks ugly, and I doubt authors want that either.  Currently IE9 and Chrome 12 dev display these three snippets all the same (except color), while Firefox 4.0 and Opera 11 display the third one different from the first two (including underline thickness and positioning, not just color).

So actually, I guess I'd be happy if we just a) standardized something like IE9's behavior for underline thickness and positioning, and b) had a property (preferably inherited) that said "make all underlines match the color of the text they're under without regard to what element generated them".  If authors used the property from (b), underlines would behave like in Word, which IMO is the expected behavior.

Actually, maybe we could even just change the *default* behavior of underline color to match how it works in Word.  It will change how existing content is displayed, but I strongly suspect it will improve more pages than it breaks.  But I'd be happy even if it were opt-in.
I don't think the current CSS text-decoration model is useful or makes sense.  It would have been much better if there were an inherited text-underline property from the beginning, with color/height/thickness determined by where it's drawn.  It's probably not worth it to do that by this point, but we could still improve matters.

Received on Thursday, 7 April 2011 19:07:35 UTC