- From: Håkon Wium Lie <howcome@opera.com>
- Date: Mon, 6 Feb 2012 11:53:34 +0100
- To: Alan Stearns <stearns@adobe.com>
- Cc: "www-style@w3.org" <www-style@w3.org>
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