Re: [css3-regions][css3-gcpm] Plan B versus Plan A

Alan Stearns wrote, some time back:

 > >> there are some layouts where placing regions directly
 > >> will be much more straightforward.
 > > 
 > > Could you give some examples?
 > 
 > The point of the following example is that there can be an extra calculation
 > in positioning column boxes. I think region positioning is more
 > straightforward in this example.
 >  
 > Let's say I have a layout created with various graphic elements and there
 > are "holes" for the text to flow through. The layout could be quite complex,
 > but I think we can start with the simplest case. In the example below I have
 > a green rectangle. I want to flow text both above and below it. The crucial
 > part is that the green rectangle is *not* part of the text, and *not* part
 > of the named flow.
 > 
 > The position of the second region is dependent on the height of the green
 > rectangle, but the style block for the region does not have to include this
 > information. I can change the height of the green rectangle in one line of
 > CSS and the second region changes position. I may be wrong, but I think the
 > column styling solution to this would need to change both the height of the
 > green rectangle *and* the positioning of the second column.
 > 
 > It's a small difference in this stripped-down example, but the point is that
 > each region can participate directly in whatever layout scheme you dream up.
 > Columns have their initial layout scheme that (for this example) has to be
 > overridden, so there's a translation between the initial position and the
 > desired position that needs to be maintained.
 > 
 > <style>
 >     article {
 >         -webkit-flow-into: flow;
 >         font-size: 2em;
 >     }
 >     body::before {
 >         -webkit-flow-from: flow;
 >         width: 25%;
 >         height: 25%;
 >         display: block;
 >         content: 'x';  // workaround for WebKit bug
 >     }
 >     body::after {
 >         -webkit-flow-from: flow;
 >         width: 25%;
 >         display: block;
 >         content: 'x';  // workaround for WebKit bug
 >     }
 >     .unrelated-content{
 >         height: 25%;
 >         background-color: lightgreen;
 >     }
 > </style>
 > <body>
 >     <div class=unrelated-content></div>
 >     <article>Text set at a large size with a small measure so that I don't
 > have to type very much and the code isn't shorter than the sample text which
 > has no meaning on its own.</article>
 > </body>

If I understand your example correctly, you'd like to see:

    Text set at a large size with 
    a small measure so that I don't
    have to type very much and the

        [green rectangle]

    code isn't shorter than the sample 
    text which has not meaning on its
    own.

Using GCPM, it can be achieved with:

  body { width: 25% }
  .unrelated-content {
    float: top;
    float-offset: 0 25%; /* pushes the green rectangle downwards */
    height: 25%;
    background-color: lightgreen;
  }

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

Received on Monday, 6 February 2012 11:06:41 UTC