Rich page layout with HTML and CSS3

by Jonathan Allen on Mar 22, 2012 |

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

Rate this Article


Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Grid layout by Sandeep Khurana

Does any browser support the spec at yet? It will be nice to be able to have this grid layout.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

1 Discuss
General Feedback
Marketing and all content copyright © 2006-2016 C4Media Inc. hosted at Contegix, the best ISP we've ever worked with.
Privacy policy

We notice you're using an ad blocker

We understand why you use ad blockers. However to keep InfoQ free we need your support. InfoQ will not provide your data to third parties without individual opt-in consent. We only work with advertisers relevant to our readers. Please consider whitelisting us.