Re: [css3-regions] [css3-grid-align] auto-generation, pagination, and code examples

Hi Håkon,

From: Håkon Wium Lie <howcome@opera.com<mailto:howcome@opera.com>>
Date: Sun, 11 Dec 2011 01:34:06 -0800
To: "Tab Atkins Jr." <jackalmage@gmail.com<mailto:jackalmage@gmail.com>>
Cc: Rossen Atanassov <Rossen.Atanassov@microsoft.com<mailto:Rossen.Atanassov@microsoft.com>>, Chris Jones <cjon@microsoft.com<mailto:cjon@microsoft.com>>, Adobe Systems <vhardy@adobe.com<mailto:vhardy@adobe.com>>, W3C style mailing list <www-style@w3.org<mailto:www-style@w3.org>>
Subject: Re: [css3-regions] [css3-grid-align] auto-generation, pagination, and code examples

Tab wrote:

     http://www.w3.org/TR/css3-regions/#named-flows-and-regions

> > What would the code look like if you we using, say, grids?
>
> Something like this:
>
> /* Region related style for redirecting content flows */
> #article {
>     flow-into: article_flow;
> }
>
> #region1, #region2, #region3, #region4 {
>     flow-from: article_flow;
> }
>
> /* positioning and sizing of the region elements */
> #page {
>   width: 800px;
>   height: 600px;
>   grid-template: "aaa.e"
>                  "....e"
>                  "bbb.e"
>                  "....e"
>                  "c.d.e";
>   grid-rows: 52% 4% 20% 4% 20%;
>   grid-columns: 30% 5% 30% 5% 30%;
> }
> #regionA { grid-cell: a; }
> #region1 { grid-cell: b; }
> #region2 { grid-cell: c; }
> #region3 { grid-cell: d; }
> #region4 { grid-cell: e; }

Thanks. Some questions:

- what happens to the content that doesn't fit into the 800x600 area?

It depends on the overflow and region-overflow properties (http://dev.w3.org/csswg/css3-regions/#the-region-overflow-property). With overflow:visible and region-overflow:auto, the content will show (as illustrated in the top-right example of figure 4).

I think the first example would be better if we had a 5th region at the bottom that would receive the remainder of the flow.


- can one specify that the last column ('e' in this case) should be
   replicated in order to absorb any extra content?

Not with the current spec. That would be auto-generation of regions and we do not address that. Our take on that question is that it would be addressed with page templates.


- alternatively, how does one specify that the bottom row ('c.d.e')
   should have a flexible height to absorb any extra content?

This is not addressed right now.


- do we need to have region elements
   (#regionA/region1/region2/region3/region4) to achieve this example?
   Or, can one specify -- directly in CSS -- that the content of
   #article should be flowed into grid cells b-c-d-e?

(The Grid Layout Module uses the 'fr' unit [1], which has been removed
from Values and Units [2]. Will the 'fr' unit be edited out from Grid
Layout as well?)

[1] http://dev.w3.org/csswg/css3-grid-align/#fraction-values-fr
[2] http://dev.w3.org/csswg/css3-values/

In the early drafts, regions were not restricted to being elements. The more recent versions have narrowed on elements that generate a block container box (http://dev.w3.org/csswg/css3-regions/#the-flow-from-property).

One of the reasons is that some specs., like Grid, do not have a pseudo-selector for the cell box (actually, the ::grid-cell pseudo-selector was removed from the Grid spec).


> > The white space issue remains (it seems intrisic to regions, perhaps
> > we need a 'lh' value to express measurements in terms of line
> > heights?)
>
> Continuing this off-topic discussion, isn't this what line-grid is
> supposed to do?  You give the region a height and then tell it to snap
> to the line-grid.

Where is that developed? This one is labelled as "not being actively
maintained":

  http://dev.w3.org/csswg/css-line-grid/


I believe Tab was referring to the new work that Steve and others are working on for line grid. I do not think the new draft is out yet.

Kind regards,
Vincent