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

On 1/12/12 1:09 PM, "Håkon Wium Lie" <howcome@opera.com> wrote:

> Alan Stearns wrote:
> 
>> 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>

Received on Friday, 13 January 2012 23:52:11 UTC