Rich page layout with HTML and CSS3

| by Jonathan Allen Follow 576 Followers on Mar 22, 2012. Estimated reading time: 1 minute |

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

Adoption Stage

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

Login to InfoQ to interact with what matters most to you.

Recover your password...


Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.


More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.


Stay up-to-date

Set up your notifications and don't miss out on content that matters to you