W3C home > Mailing lists > Public > www-style@w3.org > January 2009

RE: [css3-linebox] aligning lines

From: Håkon Wium Lie <howcome@opera.com>
Date: Sat, 3 Jan 2009 18:15:35 +0100
Message-ID: <18783.40247.275862.771126@opera.com>
To: Alex Mogilevsky <alexmog@microsoft.com>
Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, "L. David Baron" <dbaron@dbaron.org>, "www-style@w3.org" <www-style@w3.org>

Also sprach Alex Mogilevsky:

 > Something needs to be said about regular nested blocks and
 > inheritance though. In non-positioned case, containing block is the
 > nearest ancestor block, which may not be the one that we want to
 > define the grid.


 > In fact the most typical case is a P inside BODY, where P has a
 > margin of 1em and BODY has line grid of 1.2em, so if P simply
 > resets the grid for its children it is not working. Is there a way
 > to make that most common case work without adding a line to
 > containing block definition?

Let's see. Perhaps we cannot rely on containing blocks in this case.
Here's the a style sheet:

  body {
    line-stacking-strategy: grid;
    line-height: 12px;

  p {
    line-height: 14px;

and we want P to live in a 12px-based grid. 

I see x solutions for this:

1) we say that the grid is estblished by the *oldest* ancestor with
'line-stacking-strategy: grid'. That would be BODY. 

The downside of this approach is that we're only able to set one grid
-- it can't be changed descendant elements. Perhaps this is a feature,
though, as we probably don't want more than one grid per page?

As a variation of this, we could allow abspos elements to establish
new grids by saying that you look for the oldest ancestor in the same

2) We change 'line-stacking-strategy' from inherited to non-inherited.
Then we can more safely look for the *youngest* ancestor with
'line-stacking-strategy: grid'. This would allow us to have more than
one grid per flow. This is a bug or a feature, depending on your point
of view.

3) We use 'grid-rows' [1] (or another non-inherited property) to define a
set of horizontal grid lines. E.g.:

  body {
    grid-rows: 12px;
    line-height: 12px;

  p {
    line-height: 14px;

This solution gives us independence from 'line-height'. This may be your
favored approach?

[1] http://dev.w3.org/csswg/css3-grid/#grid-rows

              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome
Received on Saturday, 3 January 2009 17:16:29 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:23 UTC