RE: [css3-regions] [css3-Grid] auto-generation, pagination, and code examples

Rossen Atanassov wrote:

 > Agree again, here's a version of what the code could look like. I'm
 > using the actual example from the spec and I'm refraining from
 > using anything fancy such as grid, template etc.
 > 
 > <style>
 > /* 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 {
 >   position: relative;
 >   width: 800px;
 >   height: 600px;
 > }
 > #regionA {
 >   position: absolute;
 >   width: 63%; height: 52%;
 >   left:2%; top: 2%; 
 > }
 > #region1 {
 >   position: absolute;
 >   width: 63%; height: 20%;
 >   left:2%; top: 56%; 
 > }
 > #region2 {
 >   position: absolute;
 >   width: 30%; height: 20%;
 >   left:2%; top: 78%; 
 > }
 > #region3 {
 >   position: absolute;
 >   width: 30%; height: 20%;
 >   left:35%; top: 78%; 
 > }
 > #region4 {
 >   position: absolute;
 >   width: 30%; height: 96%;
 >   right:2%; top: 2%; 
 > }
 > </style>
 > 
 > <div id="page">
 >     <div id="regionA"></div>
 >     <div id="region1"></div>        
 >     <div id="region2"></div>        
 >     <div id="region3"></div>        
 >     <div id="region4"></div>
 > </div>  

Thank you, this is useful. Here's a simple document with your code
pasted into it:

  http://people.opera.com/howcome/2011/tests/regions.html

Indeed, it replicates the layout of the first example in the Regions
WD:

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

However, I think your code exposes several problems with the current
approach to regions:

 - the code is quite verbose

 - if you pour more content into the region than what the
   author/authoring tool has deemed fit, you will lose content

 - if the line height used in region A doesn't align well with the
   height, you may have unwanted white space between region A and
   region 2 and 3. 

In summary, the code is something that an authoring tool could happily
generate for one-off designs, and not something that can be reused and
maintained by many.

Here's a solution which gives the same layout in three lines of code:

  article { columns: 3 }
  img { column-span: 2; width: 100% }
  .box1 { column-span: 2 }

The code is compact, the content expands, and it doesn't have the
white space issue. The example is included here:

  http://www.w3.org/TR/2011/WD-css3-gcpm-20111129/#page-floats

However, the code doesn't create regions -- it styles strucured
elements instead of containers. If there is a requirement to do so
(and I think there is, sometimes), we could address this by styling
individual columns. For example:

  article { columns: 3 }
  img { column-span: 2; width: 100%; float: top }
  article::column(1) {    /* selects column 1 */
    column-span: 2;
    float: top;
    visibility: collapse; /* so that column 2 moves in */
    height: 3em;          /* or something */
  }  

In the above example, the first column is turned into a region with
fixed height, and it spans two normal-sized columns. Column 2 moves
into the space which column 1 used to occupy and the other columns
follow. And it's all done in 7 lines of code, or so.

The white space issue remains (it seems intrisic to regions, perhaps
we need a 'lh' value to express measurements in terms of line
heights?), but the code is much shorter, no content is lost, and the
layout is flexible (the number of columns can vary).

 > I'm refraining from using anything fancy such as grid, template etc.

What would the code look like if you we using, say, grids?

-h&kon
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome

Received on Friday, 9 December 2011 10:00:33 UTC