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

On 2/6/12 11:53 AM, "Håkon Wium Lie" <howcome@opera.com> wrote:

> 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;
>   }

Yes, that does work. So my example is too simple to make my point.

What if the height of the first region is based on something that could not
be put into the unrelated-content style block? Say you want the first four
lines of text to come before the unrelated content, and you're assuming that
line-height is 1.2x font-size. So you set the height of the first region to
9.6em.

In the region code this height can go in the first region style block and
the unrelated content fits below without needing to add anything to its
style block.

But the 2em value of font-size isn't present in the unrelated content, so
the height calculation of the region can't be make in the unrelated-content
block. Is there a way to position the unrelated content using GCPM in this
case?

Thanks,

Alan

Received on Monday, 6 February 2012 14:22:21 UTC