Re: line-height suggestions and easier alignment

On 8/01/2012 10:56 PM, Anton Prowse wrote:
> On 08/01/2012 08:43, Alan Gresley wrote:
>> On 5/01/2012 8:12 AM, Alan Stearns wrote:
>>
>>> On 1/4/12 12:13 PM, "Gérard Talbot"<www-style@gtalbot.org> wrote:
>>>>
>>>> I am inclined to be against adding anything else until the problems
>>>> listed, carefully explained with regards to section 10.8 of CSS 2.1 are
>>>> not addressed to begin with. Anything else added into the leading model
>>>> (CSS3) needs to be extremely very well justified, substantiated.
>>>>
>>>
>>> Gérard,
>>>
>>> The basic problem is not being able to control where the leading is
>>> applied.
>>
>> I agree with this premise but a *line box* is only the height of it's
>> content. This line box can only be changed by using font-size.
>>
>> Let me state this with great emphasis, 'line-height' never changes this
>> content height and 'vertical-align' does not alter any vertical
>> alignment of this content.
>
> I'm not sure I understand what you're saying here. 'line-height'
> certainly does influence the height of line boxes, as does
> 'vertical-align'.

Hello Anton,

My understanding of a 'line box' may be different from other concepts of 
it. From the index of CSS2.1 there are two links for line box.

The first link is for the 'inline formatting context'.

http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#inline-formatting

   | In an inline formatting context, boxes are laid out
   | horizontally, one after the other, beginning at the
   | top of a containing block. Horizontal margins,
   | borders, and padding are respected between these
   | boxes. The boxes may be aligned vertically in different
   | ways: their bottoms or tops may be aligned, or the
   | baselines of text within them may be aligned. The
   | rectangular area that contains the boxes that form
   | a line is called a line box.


Below in the ASCII example are rectangular areas (several line boxes) of 
different visual heights.
      ____
pÉ pÉ____
pÉ pÉ____
pÉ ლ____
pÉ pÉ____
pÉ pÉ____


Can you please tell me exactly what you believe is the line box in this 
test (I believe it to be the span with the yellow background).

http://css-class.com/test/css/text/line-box-001.html

> 'font-size' is responsible for the visible "height" of the glyphs.

Agree.

> However, this "height" is not a direct factor in determining the line
> box height and the alignment within the line box.

Agree.

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

So you are see something which you call a guide box. I understand 
line-height as altering the vertical distance between successive line 
boxes when they wrap to a new line.

> In CSS21, the leading is the difference between the vertical extent of
> the inline box and the height of the guide box.

Where is CSS2.1 do you find guide box?

I observe that altering the line-height in respect to the font-size 
creates a gap that can been understood as leading.

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

This is true but not all browsers flow line boxes correctly by this 
definition of a vertically centered guide line when they encounter 
floated content. The first browser to do this correctly was Opera. IE8 
followed suit in 2008. It was I believe late 2008 / early 2009 when 
Firefox (Gecko 2) correctly did this and WebKit still does it wrong (see 
first example).

http://css-class.com/test/css/visformatting/floats-with-inline-elements2.htm

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

It's possible to have line-height: 0 which shows no leading and 
overlapping line boxes. The overlap is roughly 80% of the height of the 
line box (the one I conceptualized).

> 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.
>
> <div style="line-height:20px; width:280px">
> text text text text text text text text text text text text
> <span style="line-height:inherit; font-size:140px">text</span>
> text text text text text text text text text text text text
> </div>
>
> Observe how the line box containing the span is taller than the other
> line boxes, yet not as tall as the span's inline box. This is because
> the line-height of the span is smaller than the vertical extent of the
> inline box derived from the large font size. (Hence the leading is
> negative.)

Agree.

> The top of the guide box lies somewhere in the middle of the
> "hole" in the 'e' (no doubt there exists a technical term for that
> hole!) and the bottom of the guide box lies somewhere just above the
> curly tip of the bottom of the 't'. Since the vertical align is
> 'baseline', the baselines of the large letters and the preceding smaller
> letters line up.

As they should.

> The line box height is then the distance between the
> lowest of the bottoms of the guide boxes on the line (which is the
> bottom of the guide box of the smaller text) and the highest of the tops
> of the guide boxes on the line (which is the top of the guide box of the
> larger text). Hence the line box's top intersects the hole in the large
> 'e' and its bottom is a little below the lined-up baseline.

The only thing I can say is that this concept does not appear in CSS2.1. 
We all have slightly different metal models since CSS2.1 notoriously 
doesn't define things as it really should and then we have these fun 
discussions about what is really happening or what we are observing. :-)

>>> Specifically the part of 10.8.1 that divides the leading and adds
>>> half to
>>> the top and half to the bottom. Not all typographic systems work that
>>> way
>>> (as you found in your wikipedia research). Adding a property to modify
>>> how leading is applied could ease the impedance mismatch.
>>
>> This can be done but it has to be a change to the CSS line box. What you
>> are proposing is a new CSS box within the current CSS line box which has
>> upper and lower parts that can behave like adjustable leading.
>
> I don't agree that the proposal introduces a new box, but I do agree
> that it changes the line box behaviour (which is precisely what Ric
> wants).

I will discuss this in a different message.


> [1] http://www.gtalbot.org/DHTMLSection/vertical-align-values.html
>
> Cheers,
> Anton Prowse
> http://dev.moonhenge.net


Regards Alan.


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

Received on Monday, 9 January 2012 03:35:56 UTC