W3C home > Mailing lists > Public > www-style@w3.org > December 2011

Re: line-height suggestions and easier alignment

From: Gérard Talbot <www-style@gtalbot.org>
Date: Sat, 24 Dec 2011 13:18:54 -0800
Message-ID: <e116f6ac3d459e00005eb125dcd7b367.squirrel@gtalbot.org>
To: "Richard Le Poidevin" <ric@betleywhitehorne.com>
Cc: www-style@w3.org

Le Ven 23 décembre 2011 2:33, Richard Le Poidevin a écrit :
> Hello,
>
> I've often been frustrated by how line-height works in CSS. The value is
> added equally to the top and bottom of each line. This is different to
> the behaviour of programs such as InDesign, Illustrator etc which add
> leading (line-height) to the bottom of each line. I believe this
> behaviour to be far easier to control and useful.
>
> Examples:
>
> I have a site with three columns.

Richard,

Can you post an URL?

> The text in each column needs to line
> up vertically, however the central column has a header set in larger
> type and requires a bigger line-height. If I increase the line-height it
> gets applied top and bottom to each line pushing the title down the page
> a few pixels. I then need to use a horrible hack such as a negative top
> margin to to fix this.
>
> This 'fix' will not work if the box has a background colour that also
> needs to align.
>
> I think we either need a rule to supplement line-height such as
> line-height-align/line-height-origin. Or perhaps base-line: top / middle
> / bottom.

Can you describe (ideally with a schema) what each (line-height-align and
line-height-origin: are these 2 possible names for a property which would
do the same thing?) of these would represent?

>
> Or maybe have a leading rule that behaves in the same manner that has
> been used since movable type was first invented

I've searched, found 2 images and you appear to be correct:

http://en.wikipedia.org/wiki/Sort_%28typesetting%29

http://en.wikipedia.org/wiki/Movable_type#Type-founding

> and where it gets it's
> name from.I could then ditch line-height all together as I find it had
> to find any practical uses for the current implementation.

Practical use of line-height? basically one but a very important one:
readability and therefore immediate impact on accessibility of a webpage.

"
Text set 'solid' (no leading) appears cramped, with ascenders almost
touching descenders from the previous line. The lack of white space
between lines makes it difficult for the eye to track from one line to the
next, and hampers readability.
"

Regarding your proposal, I am skeptical right now. You propose a new
implementation mostly because one particular webpage design/goal can not -
for now - be successfully achieved.

I do think that section 10.8.1 should be better presented, explained, with
schema.

http://wiki.csswg.org/spec/css2.1#issue-154

Joyeuses fêtes et Joyeux Noël

regards, 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 Saturday, 24 December 2011 21:19:25 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:47 GMT