Re: [css3-regions][css3-exclusions][css3-gcpm] Plan B

Tab wrote:

 > > > For example, in the canonical regions example, the current Regions
 > > > spec uses Grid to line up the regions. You use some relatively
 > > > complicated combination of multicol, column spans, and page floats to
 > > > achieve the same thing. I find the former *much* more readable and
 > > > easy to use, but currently it's impossible to do so.
 > >
 > > The current regions spec [1] doens't have any grid code in it, as far
 > > as I can see. Could you post the code example you like? Is it the one
 > > you posted here?:
 > >
 > > http://lists.w3.org/Archives/Public/www-style/2011Dec/0290.html
 > 
 > Oh, whoops, yes, the code in that email is what I'm thinking of.

Ok, here it is:

  /* 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; }
  
I like the ascii-art syntax for 'grid-template'. But I also see
several problems with this code:

 - it uses elements for regions

 - the layout is fixed; there is no way to add more columns if more
   content is poured into the flow, and the size and aspect ratio of
   the image is fixed

 - pagination isn't addressed -- e.g., there is no way to say that
   region e should be on the next page

 - it's quite verbose

Here's how it can be done using multicol:

  .article { columns: 3 }
  .article img { column-span: 2 }
  .article .lead { column-span: 2 }

The above example doesn't create regions, though -- the "lead"
element is structural. To use regions, the code is slightly longer:

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

But still only seven lines compared to the 20 or so lines in the
grid-based syntax (not counting markup). As for readability, others
should judge, but personally I find the compact code easier to read.

More importantly, the multicol-based alternatives:

  - don't abuse elements
  - provide reusable, scalable designs that adjust to:
    -- different image sizes
    -- differnet page widths
    -- different content lenghts

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

Received on Wednesday, 28 December 2011 16:26:09 UTC