Re: [CSS21] 10.8.1 (line-height) - comments on Working Draft

On 8/01/2011 8:03 AM, Anton Prowse wrote:
> This is an extension of #16[1] in my series of issues with the inline
> formatting model.
>
> 10.8.1:
>
> # On a block container element whose content is composed of inline-
> # level elements, 'line-height' specifies the minimal height of line
> # boxes within the element. [...]
> #
> # [...]
> #
> # On an inline-level element, 'line-height' specifies the height that
> # is used in the calculation of the line box height (except for
> # inline replaced elements [...]).
>
> (Note that fantasai proposes changing the latter sentence to:
>
> | On a non-replaced inline element, 'line-height' specifies the
> | height that is used in the calculation of the line box height.
>
> in [2].)
>
> Firstly, this is not exhaustive. What does 'line-height' mean on other
> elements (specifically, table elements and replaced elements)? Is it
> ignored? If so, that needs to be stated.


Line-height is not ignored for table elements and replaced elements. For 
replaced elements, a height can be declared,

img { height: 100px; }

but for an inline- non replaced element, height has no affect.

span { height: 100px; }


When you declare line-height, you are stating the distance between the 
baselines of line boxes that wrap to a new line. With a line-height of 
1, the tops of the line boxes overlap the baselines of the line boxes on 
the previous line. This is seen in this test for where line-height is 
line-height: 1.

<http://css-class.com/test/css/text/line-height-inline-block.htm>


Highlight or select the text or line boxes with a mouse and observe what 
is selected. All browsers are different in what is selected but they all 
show similar overlap for the 'line-height: 1' examples.

I suggest you read up on leading [3] and this list message [4] from a 
thread relating to underline and why lines can overlap.


> Secondly, this is over-specified. What does 'line-height' mean on
> inline-level block container elements (specifically, inline-block
> elements and the wrapper box for inline-table elements)? For
> inline-blocks, for example, does 'line-height' influence the "inside"
> (the line boxes it contains) or the "outside" (the line box in which it
> sits), or both?


For elements with a display value of 'inline-block', line-height no 
affect outside but does cause the visual height to take up all the 
height in a line box. What happen inside is the same as what happen 
inside an line box, unless the inline-block has multiple lines (see 
above test).



> It seems as if it applies to the "inside", since it's
> (probably!) the margin area height that contributes to the height of the
> line box in which it sits.
>
>
> [1] http://lists.w3.org/Archives/Public/www-style/2010Jul/0535.html
> [2] http://lists.w3.org/Archives/Public/www-style/2010Aug/0010.html
> (Issue 17)


3. <http://en.wikipedia.org/wiki/Leading>
4. <http://lists.w3.org/Archives/Public/www-style/2010Dec/0448.html>


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

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Received on Saturday, 8 January 2011 16:39:43 UTC