Complex layout has long been a primary concern of print media. The physical constraints imposed on publications such as magazines and newspapers has caused them to invent rather complex flow layouts where content can span multiple columns and weave its way around pictures and charts. And it has to do this dynamically as content is added and altered during the type setting process. Adobe seeks to bring this level of layout control to the web via W3C proposals for a CSS Regions Module and a CSS Exclusions Module.
According to the press release by Arno Gourdol, the proposals are comprised of four key features:
- Threading content: Content that flows from one area to another.
- Arbitrarily shaped containers: Text displayed in non-rectangular areas.
- Arbitrarily shaped exclusions: Text can wrap around arbitrary shapes.
- Region styling: Styling content depending on the area in which it flows.
To flow content across multiple regions, one would tag a div with the CSS property “flow”. Then one needs to tag one or more other div elements with “content: from(xxx);” where xxx is the name assigned to the flow property. Content is then automatically flowed from one div to the next as each div is filled.
In order to support non-rectangular regions, developers can use the wrap-shape and wrap-shape-mode properties. Currently wrap-shape accepts a polygon with a list of points, but “you could imagine that other geometric primitives could be used to specify the shape, or even using the alpha values of an image”.
Exclusion regions are areas that will not display text. This is also done with the wrap-shape-mode property, except that it is given the value “around” instead of “content”.
Though not yet available in the WebKit prototype, Adobe also intends to support region styling. In the example below, you can see how the first region is in a larger font and different color than the other regions that share the same content.
Note: The above image is Copyright © 2012 Adobe Systems Incorporated