Re: line-height suggestions and easier alignment

Le Mer 4 janvier 2012 13:12, Alan Stearns a écrit :
> 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.
> 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.
>
> We will certainly need to justify and substantiate the need, but I think
> Richard's made a good start with his page of examples. Here's another,
> simpler case. In the code below I'd like to align the text to the top of
> the
> line box (as I get when I set line-height to 1em). Vertical-alignment
> doesn't help,

... because vertical-align only applies to inline level elements and table
cells. This bit of info is importantissimo to insert here. :)


> but if I had a way of placing all of the leading below the
> line it would work the way I want.
>
> <style>
>     .line {
>         line-height:2em;
>         background-color:lightgray;
>         vertical-align:top;

'vertical-align'
    Value:  	baseline | sub | super | top | text-top | middle | bottom |
text-bottom | <percentage> | <length> | inherit
    Initial:  	baseline
    Applies to:  	inline-level and 'table-cell' elements
    Inherited:  	no

http://www.w3.org/TR/CSS21/visudet.html#leading


>     }
> </style>
> <html>
> <body>
>     <div class="line">
>         "Top" Aligned Text
>     </div>
> </body>
> </html>


Allow me to emphasize, underline the importance of first fixing the issues
with 10.8. I want to repeat, pounce on this because I really think it is
important.


General idea: people read section 10.8 and do not understand it. (I can
even document this extremely well with incorrect testcases submitted to
CSS 2.1 test suite here.)

How to fix this? Create diagrams, schemas, code examples and link those to
live demo pages. Even link to recommendable tutorials if possible.

More reading:

[CSS21] Section 10.8 on line-height and vertical-align should have schemas
and examples
http://lists.w3.org/Archives/Public/www-style/2009Apr/0519.html
http://lists.w3.org/Archives/Public/www-style/2009May/0079.html

"
The learning curve here is quite steep; missing even a small point may
result in fundamental misunderstanding. This document has withstood
repeated scrutiny from both the CSS Working Group and the wider CSS
community, but that does not mean it is either perfect or complete. There
may be implications which are not presented here, and it is possible that
some phrasing will be confusing to new readers.
"
http://meyerweb.com/eric/css/inline-format.html




Why is the following diagrams (wrt issue 154 [1]) not good?

http://test.csswg.org/source/contributors/microsoft/incoming/half-leading.png

http://test.csswg.org/source/contributors/microsoft/incoming/emboxes.png

The half-leading.png image has glyphs that have no descender at all, no
glyphs reaching caps height and the diagram does not state that
line-height is 1.4em or so. A glyph like É (max-ascender) is most likely
going to "break" the diagram, its design (and therefore its
understanding).

I was for creating a page like
Vertical-align values
http://www.gtalbot.org/DHTMLSection/vertical-align-values.html
and add it at least in CSS 2.1 test suite, if not, entirely into section
10.8.

There are also *_very few_* good, reliable, trustworthy tutorials on the
web on leading, vertical-align and line-height.


regards, Gérard

[1]: http://wiki.csswg.org/spec/css2.1#issue-154
-- 
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, 4 January 2012 21:44:32 UTC