Re: line-height suggestions and easier alignment

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?

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 ?

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?


>> 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.

>>
>>
>>    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.

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%);
]

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.

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É.

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)
-- 
CSS 2.1 Test suite RC6, March 23rd 2011
http://test.csswg.org/suites/css2.1/20110323/html4/toc.html

Contributions to CSS 2.1 test suite
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/

Web authors' contributions to CSS 2.1 test suite
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/web-authors-contributions-css21-testsuite.html

Received on Wednesday, 11 January 2012 21:18:47 UTC