Re: line-height suggestions and easier alignment

On 10/01/2012 4:57 AM, "Gérard Talbot" wrote:
>
> Le Lun 9 janvier 2012 1:41, Anton Prowse a écrit :
>> On 09/01/2012 03:51, "Gérard Talbot" wrote:
>>> Le Dim 8 janvier 2012 3:56, Anton Prowse a écrit :

[snipped]

>>>> 'font-size' is responsible for the visible "height" of the glyphs.
>>>> However, this "height" is not a direct factor in determining the line
>>>> box height and the alignment within the line box.  Rather,
>>>> 'line-height'
>>>> determines the height of what I call the "guide box" associated to each
>>>> inline box.  Think of the guide box as overlaying the inline box, with
>>>> the same width but with unrelated height.
>>>>
>>>> In CSS21, the leading is the difference between the vertical extent of
>>>> the inline box and the height of the guide box.  Thanks to the existing
>>>> CSS21 model of leading implemented as two pieces of half-leading above
>>>> and below the guide box, the guide box is vertically centered with
>>>> respect to the inline box.  (Leading is the result of a calculation
>>>> rather than an input to a calculation; it's merely an equation
>>>> balancing
>>>> exercise.  It would be possible to rewrite CSS21 to avoid all mention
>>>> of
>>>> leading.)  Commonly the guide box is taller than the vertical extent of
>>>> the inline box and hence leading is positive.  It's perfectly possible
>>>> for the guide box to be shorter and hence leading to be negative,
>>>> though: just set a line-height that's smaller than the inline box
>>>> vertical extent that's derived from the font size.
>>>>
>>>> The 'vertical-align' values 'top', 'bottom' and 'middle' act on the
>>>> guide boxes, not on the inline boxes.
>>>>
>>>> To see the interaction between vertical-align, line-height and
>>>> font-size, consider the test case below.
>>>
>>> I've put the following (slightly modified version) after/along with Alan
>>> Gresley code example:
>>>
>>> http://www.gtalbot.org/BrowserBugsSection/css21testsuite/line-height-leading-AGresley.html
>>
>> Thanks, although you'll need to change my description because of course
>> there is no large 'e' or 't' anymore.
>>
>
> I restore the large 'e' and 't'.

The content height is the same regardless of if there is 't' and 'e' or 
if there is 'X', 'p' and 'É' (test not using Ahem).

I would like to play around with Anton's test to truly understand the 
content height or line-height when a line has different sized glyphs 
(different font metrics or different values for 'font-size').

Here are some new test cases that clearly shows what happens with a 
single line.

With 'X', 'p' and 'É' and Ahem font.

http://css-class.com/test/css21testsuite/linebox-leading-010.htm

http://css-class.com/test/css21testsuite/linebox-leading-011.htm


With 'X', 'p' and 'É' and no Ahem font.

http://css-class.com/test/css21testsuite/linebox-leading-013.htm

http://css-class.com/test/css21testsuite/linebox-leading-014.htm


Both Firefox and IE9 render the above cases almost identical. The first 
float in 'linebox-leading-011' and 'linebox-leading-014' has to be not 
less than 80px or the text would sit to the right of the second float. 
For Opera 11.60, first float in 'linebox-leading-011' and 
'linebox-leading-014' has to be not less than 81px.

The full content height of the glyphs are highlighted when selected in 
Firefox, IE9 and Opera. With WebKit only the upper portion of the glyphs 
are highlighted when selected.

The next two test cases just demo the WebKit bug (was similar to an old 
Gecko bug). I need to read up on issue 185 [1] but the bug with WebKit 
was discussed by myself, Bruno Fassino and Philippe Wittenbergh on CSS 
discuss in late 2007 [2]. Here is Bruno Fassino's test case [3]. I 
couldn't find it in Bugzilla.

http://css-class.com/test/css21testsuite/linebox-leading-011.htm

http://css-class.com/test/css21testsuite/linebox-leading-014.htm


Regards, Alan


[1] http://wiki.csswg.org/spec/css2.1#issue-185
[2] http://archivist.incutio.com/viewlist/css-discuss/93172
[3] https://bug50630.bugzilla.mozilla.org/attachment.cgi?id=326136
[4] https://bug50630.bugzilla.mozilla.org/attachment.cgi?id=326158


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Tuesday, 10 January 2012 11:13:34 UTC