Re: [CSS21] shortening inline-height has no apparent effect

Le Lun 14 mai 2012 10:56, Tab Atkins Jr. a écrit :
> On Mon, May 14, 2012 at 4:29 PM, Roger Baker <tstartme@hotmail.com> wrote:
>> Hi,
>> Expanding the inline height of the inline box in the following example
>> has
>> the expected separation (effect due to expansion of its line box):
>>
>> http://jsfiddle.net/8XJhY/6/
>>
>> But *shortening* the inline height of the inline box does not bring the
>> succeeding line box closer (does not appear to shorten its line box),
>> for
>> example:
>>
>> http://jsfiddle.net/8XJhY/1/
>>
>> Can someone help me explain this (or point me to the relevant section of
>> the
>> spec)?
>
> (Someone else can correct me if I'm wrong here - inline layout isn't
> my specialty.)

Tab,

I am absolutely convinced that section 10.8 should have diagrams, code
examples, explanations, etc. A wide majority of people do not, can not and
will not understand section 10.8 without these.


>
> I believe that line boxes size themselves to the minimum of the
> line-height of their containing block and the height of their
> contents.

You most likely meant maximum, not minimum.

Also, an inline element may be of a certain height but vertical-align-ing
it on the baseline will cause the line box to become taller (since some
vertical space must be taken into account for the descender space). Or
having an inline element vertical-align-ed at middle, etc.


> So, adding a <span> with a large line-height (or just a
> large font-size, or a tall image) will grow the line box, but adding
> one with an extra-small height does nothing.

line box height = max(line-height of containing block, distance between
the uppermost box top and the lowermost box bottom among all inlines)


Roger Baker, load the
http://test.csswg.org/suites/css2.1/nightly-unstable/html4/inline-formatting-context-010b.htm
test and then change line 49 from
 line-height: 0px;
to
 line-height: 50px;

and then measure the yellow rectangle height when a) the present,
displayed black squares are bigger than 40px and b) when the present,
displayed black squares are smaller than 40px: the line box a) grows in
height and b) shrinks. The glyphs must be sitting on the baseline which
is, for the Ahem font, at 20% of the glyph's height.

The baseline could also be drawn in that example or it can be established,
measured when there are several glyphs of different height. One other way
to do this is to use the É glyph (for the Ahem font only) because
"
'É' U+00C9 A rectangle exactly 0.8em high, 1em wide, and aligned so
             that its bottom is flush with the baseline.
"
http://www.w3.org/Style/CSS/Test/Fonts/Ahem/


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 Monday, 21 May 2012 05:32:00 UTC