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: Wed, 28 Dec 2011 15:26:41 -0800
Message-ID: <ed1b0a71168abcd8284269c8feef5beb.squirrel@gtalbot.org>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: "Richard Le Poidevin" <ric@betleywhitehorne.com>, www-style@w3.org

Le Mar 27 décembre 2011 10:57, Tab Atkins Jr. a écrit :
> On Fri, Dec 23, 2011 at 2:33 AM, Richard Le Poidevin
> <ric@betleywhitehorne.com> wrote:
>> 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. 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.
>> Or maybe have a leading rule that behaves in the same manner that has
>> been
>> used since movable type was first invented 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.
> The idea of controlling where the leading gets placed (or
> equivalently, where the text is placed within the line-height) makes
> sense to me.


How is this idea of where the leading starts an improvement? Please

>  Your use-case (a heading in a larger font, and thus
> larger line-height, where you want the top of the heading to line up
> visually with the top of the first lines in the other columns) is
> definitely reasonable.

Please explain why defining+controlling where the leading would start
would be reasonable, advantageous or adding some kind of usefulness, value
in such case. Regardless of where the leading starts, it will not impact
display of glyphs which could be impossible to vertically align anyway:
glyphs are not the same either; there are those with ascenders, with
descenders, etc...

I have asked already Richard to give an URL about his three columns webpage.

If a heading, let's say, <h1> is (font-size) 2em with a line-height of
1.2, it won't align anyway with a p (font-size) 1em with a line-height of

As far as I can see this, it does not really matter where the leading
actually starts.

Just a supposition: maybe what Richard needs would be to correctly use
line-height like in

div#central-column > h1 {font-size: 2em; line-height: 2.4;}

div#left-column:first-line {font-size: 1em; line-height: 2.4;}

(assuming central column uses h1 heading; we also have to assume and
postulate that glyphs with no ascender should not be top-aligned with
glyphs having an ascender, same thing with descender, max-ascent,
max-descent cases.)

And there is already a property for controlling where inline boxes are
vertically aligned inside the line box in CSS 2.1: vertical-align.

> We can't change the default behavior regarding leading distribution
> now, as there's tons of content that depends on the existing
> definition.  However, I can get behind a new property that allows some
> control over this.  For consistency with similar properties, it would
> be better to do 'line-height-align' or 'line-align', with values
> "before | middle | after" (or perhaps "over | middle | under" to align
> with the over/under directions defined in
> <http://dev.w3.org/csswg/css3-writing-modes/#line-directions>),
> defaulting to "middle".

I do not understand how or why having control over where the leading
starts would actually fix the problem described (in general terms) by
Richard's 3 column webpage. We *really* need a demo webpage clearly
presenting the issue first.

regards, Gérard
CSS 2.1 Test suite RC6, March 23rd 2011

Contributions to CSS 2.1 test suite

Web authors' contributions to CSS 2.1 test suite
Received on Wednesday, 28 December 2011 23:27:13 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:08 UTC