Re: line-height suggestions and easier alignment

On 12/01/2012 8:15 AM, "Gérard Talbot" wrote:
>
> Le Mar 10 janvier 2012 23:03, Alan Gresley a écrit :
>> On 11/01/2012 5:37 AM, "Gérard Talbot" wrote:
>>>
>>> Le Mar 10 janvier 2012 1:12, Alan Gresley a écrit :
>>>
>>> [snipped]
>>>
>>>> the default value of 'line-height' which is 1.12 times greater
>>>> than the 'font-size'.
>>>
>>> [snipped]
>>>
>>> This is not always or completely true. It's not clear where such '1.12'
>>> factor value comes from...
>>
>> I made a mistake (often happens) and this is based on test with Times
>> New Roman. With font-size 100px, 'line-height' is 1.12 times greater
>> than the 'font-size'. With font-size 100px, the default 'line-height' is
>> 1.17 times greater than the 'font-size'.
>
> Alan,
>
> Huh... not sure what you're saying here. You get those numbers with which
> browser/browser version?

For Firefox 9, Safari, Opera 11.60 and IE9 (same order in screenshot). 
Here is the screenshot of the test showing 'line-height' values of 
'1.12' and '1.17' side by side.

http://css-class.com/test/temp/lines-TNR1-12.png

> In your
> http://css-class.com/test/css/text/linebox-line-height-010.html
> you say
>
> "
> line-height: 1.12; A test, hightlight the below line in Firefox, IE and
> note that the hightlighted content is the same height at the line-height.
> "
> a) IE is which version? IE 8? or IE9? or IE10PP2 ?

All versions that I could test with. IE9 and IE10PP2 and IE8 with 
IETester. The highlighting of each line shows that Safari and Opera's 
highlighted box is 1px greater in vertical height (bleeds 1px below 
across border). For IE9 and IE10PP2, the highlighted box is 2px greater 
in vertical height (bleeds 2px below across border).

> b) "the hightlighted content is the same height at the line-height": and
> that would be true for "Times New Roman" ... but not necessarly any other
> serif font..., right?

Correct.

A screenshot with Times New Roman.

http://css-class.com/test/temp/lines-TNR.png

A screenshot with Arial.

http://css-class.com/test/temp/lines-Arial.png

A screenshot with Poor Richard.

http://css-class.com/test/temp/lines-PR.png

>>> Default, initial value of line-height is 'normal' ... which can range
>>> from
>>> 1.0 to 1.2 according to spec.
>>>
>>> "
>>> normal
>>>       Tells user agents to set the used value to a "reasonable" value
>>> based
>>> on the font of the element. The value has the same meaning as
>>> <number>. We recommend a used value for 'normal' between 1.0 to 1.2.
>>> The computed value is 'normal'.
>>> "
>>> http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height
>>>
>>>
>>> By default, Firefox computes 'normal' as '1.2' while other browsers use
>>> '1.0'
>>>
>>> Revealing experiments on content box height, vertical-align and
>>> line-height (Ahem font required for examining that page)
>>>
>>> http://www.gtalbot.org/BrowserBugsSection/css21testsuite/experiments-va-lineheight-02.html
>
> I have added a bit more into<code>  chunks and also a bit more
> explanations to that experiments-va-lineheight-02 page. Line box will
> increase its height given and according to the uppermost inline box top in
> that line box.

So what do you believe is the line box? The content height, the 
line-height or do you see things like Anton?

>>>     For IE8, line-height: normal is equivalent to line-height: 1.0
>>>     For Firefox 3.6.6, line-height: normal is equivalent to 120px / 100px
>>> =
>>> 1.2 and not 1.0
>>>     For Opera 10.60, line-height: normal is equivalent to line-height:
>>> 1.0
>>>     For Safari 5.0, line-height: normal is equivalent to line-height: 1.0
>>>
>>> Gérard (who is very busy today)
>>
>> That's OK Gérard. I haven't even begun testing 'line-height' values
>> using keywords but I do note that with test using Ahem font, the default
>> 'line-height' is equivalent in each browser as if line-height: normal
>> has been used (Firefox being the exception with 1.2).
>>
>> http://css-class.com/test/css/text/linebox-line-height-010.html
>
> (suggestion) I wish you could improve a bit that webpage.

It needs a lot of work.

> What is the meaning of that red line? As far as I can see, it vertically
> split in 2 perfect halves the line box ... and nothing else
> typographically speaking. [Btw, Konqueror 4.7.4 is not able to render that
> red line; I've tried adding
> background: -khtml-linear-gradient(top, transparent 49%, red 49%, red 51%,
> transparent 51%);
> ]

The red line is always vertically centered first within the content 
height and secondly within the line-height. Above the red line is the 
top half of the half leading and below the red line is the bottom half 
of the half leading.

The red line also shows where the two parts of the uppercase letter 'X' 
cross and where the center line of the letter 'E' is positioned. This 
would equate roughly to the R-Junction, P-Junction, B-Junction, 
K-Junction, E-Junction and F-Junction vertical positions found here.

http://cdn.ilovetypography.com/img/vert-metrics/vmetrics.html

> I believe that an ideal webpage explaining all these concepts
> (line-height, line box, inline box, content area, font-size,
> vertical-align, etc.) should create a line that emulates/simulates the
> baseline.

Yes it would. This would require a vertically centered image 
(linear-gradient are ideal since they work with vendor prefixes ~ each 
browser can be given slightly different values) with vertical heights in 
em values.

> One detail I just noticed with your webpage: when inviting the user to
> highlight content area with the mouse to see something, if glyphs are
> black, then reverse video will make those white. Now, this won't affect
> understanding of where content area is but it will with Ahem font. The
> tester will only be able to figure out content area dimensions thanks to
> white space around X pÉ.

True. This does need fixing.

> Another good point of your testpage is that you most likely noticed
> (otherwise your test page reveals this nicely) that the underscore "_"
> character is a better glyph (better than, say, "p") to indicate, to reveal
> the max-descender point of a font.
>
>
> Gérard (who is very busy today)

Yes I did notice that. I also noticed the placement of '+', the Unicode 
'en dash' (U+8211), the hyphen '-' and the Greek lowercase letter Xi 
'ξ'. Did you note how the uppercase 'O' is 1px larger above and below 
the uppercase 'X'

The Unicode 'en dash' (U+8211), the hyphen '-' is also positioned where 
the two parts of the lowercase letter 'x' cross.

Regards Alan

(who is just imaging the time that it would take to create test cases 
for a testsuite just to get various browsers to render each any every 
font the same way so easier alignment can actually be specified)


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

Received on Thursday, 12 January 2012 04:43:41 UTC