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

Tab wrote:

 > > - 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
 > 
 > Sure, because in that code I was doing a direct adaptation of the
 > existing code.  That is not, in general, a failing of Grid.  Imagine
 > other uses for Grid that might benefit from region-based styling.

Ok, so the canonical regions example isn't suitable for grids. Fair
enough. But which use case are? Could you give an example of a
suitable use case, with code to illustrate? Code that doesn't have the
problems discussed in this thread?

 > > 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.
 > 
 > I'm glad you find that readable, but it's completely opaque to me.

Let's go through it, line by line:

  .article { columns: 3 }   /* sets the number of columns to 3 */
  .article img { column-span: 2 }  /* image spans across two columns, starting from the natural column */
  .article .lead { column-span: 2 }  /* lead paragraph spans across two columns, starting from the natural column */

Quite readable, I believe. Opera has implemented something that is
close, here's a screenshot and test document:

  http://people.opera.com/howcome/2011/tests/canonical-1.png
  http://people.opera.com/howcome/2011/tests/canonical-1.html

The next chunk is a little harder, but not much:

  .article { columns: 3 }  /* sets the number of columns to 3 */
  img { column-span: 2;    /* image spans across two columns, starting from the natural column */
    width: 100%;           /* makes the image fill two columns + gap between */
    float: top;            /* floats image to the top of the article; this is simlar to how 
                              CSS currently float images to the left and right. */
  article::region(1) {     /* selects region/column 1 */
    column-span: 2;        /* makes that region/column span two normal-sized columns
    float: top;            /* floats the region to the top, i.e. just under the image */
    visibility: collapse;  /* flags that the next column (i.e., column 2) should move into where
                              column 1 once was */
    height: 3em;           /* the width of the region/column is set with column-span, but the height 
                              must also be set in order to replicate the intended design */
  }

The basic idea is that columns can be moved/resized/positioned, while
keeping their place in the flow of content.

 > Almost every line in there invokes combinations of behavior that I'd
 > have to look up and think about to understand, and there are a few
 > bits (like the "visibility:collapse") that I'm *completely* in the
 > dark over.  

It's borrowed from CSS 2.1:

  http://www.w3.org/TR/CSS2/visufx.html#propdef-visibility

It's used here to indicate that when column 1 is moved, the next
column should take its place in the layout. This should probably be
the default behavior, so we may not even need the switch.

 > My own experiences as a web designer, and what I've heard
 > and seen from other webdevs, is that float-based layout was a terrible
 > hack that happened to accomplish really useful things at the time,
 > like table-based layouts further in the past.  I would not inflict
 > such things on the future, especially not in the more complicated form
 > you're demonstrating here.

If you hate floats, Plan B will be challenging. Personally, I think
floating elements to the left, right, top and bottom makes sense -- I
see it in publications every day. For example, here:

  http://pdfreebooks.org/files/alice-in-wonderland-book.pdf

How would you code this without floats?

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

Received on Thursday, 29 December 2011 09:13:30 UTC