W3C home > Mailing lists > Public > www-style@w3.org > December 2010

Re: [CSS3-text] pixel positioning of underline (was text-underline-position and superscript

From: Alan Gresley <alan@css-class.com>
Date: Tue, 28 Dec 2010 01:03:11 +1100
Message-ID: <4D189C9F.2070507@css-class.com>
To: Ambrose LI <ambrose.li@gmail.com>
CC: Koji Ishii <kojiishi@gluesoft.co.jp>, "Belov, Charles" <Charles.Belov@sfmta.com>, "www-style@w3.org" <www-style@w3.org>
On 27/12/2010 7:05 PM, Ambrose LI wrote:
> 2010/12/27 Koji Ishii<kojiishi@gluesoft.co.jp>
>
[snip]
>> First two fields are from ‘os/2’ table<http://www.microsoft.com/typography/otspec/os2.htm>,
>> and ulPos/ulThickness are from ‘post’ table<http://www.microsoft.com/typography/otspec/post.htm>.
>> The ulBottom is calculated as [ulPos]-[ulThickness]-[TypoDescender], which
>> means the bottom of underline (0=at the bottom of the em-box,
>> positive=closer to baseline, negative=below the bottom of em-box).
>>
>> It looks like most fonts have good values, while mingliu is slightly closer
>> to baseline than others. I haven’t looked into glyphs, so I’m not sure if
>> this is “too close” or not though.
>>
>
> For the punctuation to typeset correctly in Chinese, the underline need to
> be visually separate from the glyphs themselves, so likely they need to be
> lower than the descender.

What needs to be lower than the descender? The underlines?

> So my original characterization of it being too
> close to the baseline was incorrect; I should have said that it is often, if
> not always, too close to the descender line so that it intersects with the
> CJK characters.

What do you mean by a descender line?

In both CSS2.1 - 16.3.1 [1] and CSS3 - 10.1 [2] we have.

   | In determining the position of and thickness of text decoration
   | lines, user agents may consider the font sizes of and dominant
   | baselines of descendants, but must use the same baseline and
   | thickness on each line.

I'm not even completely sure if descendants in the above spec is 
referring to a *descendant box* or  *descendant region* of a line.

> (I must have been thinking of the base of CJK characters as
> resting on the baseline, but of course in reality they don't, since the
> baseline is an arbitrary baseline (that is, arbitrary for CJK) designed to
> somewhat artificially harmonize with Latin characters.)

CJK characters do sit on the baseline. It's not arbitrary. The lower 
portion of CJK characters that I have seen do not have descendant parts, 
so I presume that due to something legacy aspect (computing from 1970s 
adapting from typewriters which in turn adapted from typesetting), the 
lower portion of glyphs are position so that the baseline lines up 
between CJK and Latin in FF, Safari and IE9 or with the lower portion of 
CJK glyphs truncated as in Opera (screenshot below).

<http://css-class.com/test/temp/highlighted-text.png>

> I thought about this a bit and I am feeling that fixing the underline
> position in the fonts is not going to work. This is because CJK fonts have
> Latin characters in them and underlining need to work correctly (in the
> usual English way) for those Latin characters.

When underlining Latin (or English) the underline is drawn below the 
baseline of the letters to have a slight gap visible.

What I believe both yourself and Koji are missing is that computing, 
typewriting and typesetting devices avoid the descenders from crossing 
over the ascendants part of letters on the next line. Hand writing 
(especially old), the opposite is normal.

<http://www.google.com/images?q=old+handwritten+letters>

Note how descenders are crossing over the ascendants part of letters on 
the next line in a wild manner and that the baseline is prominent and 
easy discerned (apparent).

> So I now feel that this is a systemic problem (systemic for all software not
> designed specifically for Chinese typesetting) and not a CSS problem per se,
> and if we want to pursue this at all (i.e., that we want to go beyond what
> Adobe software is even capable of doing), it might be best to somehow
> separate the two underline positions since they really are different
> things (i.e., "under" is too ambiguous to distinguish between the two).

Depending on which browser one uses, all render these test differently.

<http://css-class.com/test/css/text/line-height-descenders-mixed-script.htm>

Highlighting text also works differently across the various browsers.

The underline is colored lime.


1. <http://www.w3.org/TR/CSS21/text.html#lining-striking-props>
2. <http://dev.w3.org/csswg/css3-text/#line-decoration>


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Monday, 27 December 2010 14:03:47 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:35 GMT