RE: [css21] line-height, problem?

Le Mar 27 novembre 2012 0:46, Stephen Zilles a écrit :
> I answered your question below in a prior message, but just in case look
> below.
>
> Steve Z.
>
>
> Consider this:
>
> <p style="line-height:10px">ABC</p>
>
> What exactly is inherited here?  And by whom?
>
> There is no other element inside that paragraph except of single text node
> with three characters. That text node has height determined by the font
> used. And that height is the content height (a.k.a. normal height) of
> single line box in that paragraph.
> SZ: you noted that there are three characters. It is these 3 characters
> which inherit 'line-height' which defines the "leading" (1/2 above and 1/2
> below) that applies to each of them. It is then these "leaded" characters
> (or more appropriately their corresponding glyphs) that determine the line
> height. The 'line-height' value on the paragraph also determines the
> minimum height of each line needed to display the content of the
> paragraph. In this case, it is most likely that all three characters
> appear on the same line and each characters 'line-height' is the same as
> that of the paragraph, so the height of the line that contains them is the
> same as line height. If the 'font-size' were 20px, then the "leading"
> would be negative (-5px above the text and -5px below) so the height of
> the line would be 10px which is exactly what you asked for (although you,
> perhaps, did not see it that way).

Andrew,

This is your example-with-question:

http://www.gtalbot.org/BrowserBugsSection/css21testsuite/line-height-question.html

The line box set at 10px is painted orange. If you text-select/highlight
[1] the ABC glyphs, then you get to see where is the top-half-leading
(which is -5px) and the bottom-half-leading (which -5px) in comparison
with the line box.

When content is taller than set line box height, then glyphs bleed out of
line box (and then they can overlap previous line box and get painted over
by following line box): this is what happens in your
example-with-question.

[1]: you must use Firefox or Opera or Konqueror (or IE if I recall
correctly) to do that; identifying top-half-leading and
bottom-half-leading thanks to glyphs highlighting with Chrome or Safari
does not work.

Gérard
-- 
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 Tuesday, 27 November 2012 19:42:49 UTC