CSS3 regions:
Rich page layout with HTML and CSS3

The web has become a rich repository of content for reference and educational materials, news, articles, and interactive apps. However, some of the capabilities that are taken for granted when designing content for print are still impossible or very difficult to implement using web standards.

Print publications are exploring better ways of translating and adapting their content to a rich digital format. We see this as an opportunity to make the web more expressive and to support more sophisticated layouts.

Adobe has been experimenting with some improvements to CSS to express the kind of complex layouts used by traditional magazines. We have submitted some proposals to the W3C CSS Working Group, and we have built a prototype implementation of these proposals using WebKit. You can download the prototype from Adobe Labsand try it out. You can find the W3C Editor's drafts on the CSS Regions Module and the CSS Exclusions Modulepages on the W3C website. Discussion on these proposals take place on the W3C CSS mailing list. You are welcome to send comments to this public mailing list. Please include "[css3-regions]" or "[css3-exclusions]" in your message's subject.

You can also send us feedback on our WebKit-based prototype and our samples on the CSS Regions forum on Adobe Labs.

A few caveats: This is a work in progress. As we continue the discussion with the broader community, we will be making some changes. The syntax used in this article reflects the state of the current W3C Editor's drafts, but it will probably evolve as the discussions in the W3C CSS working group and with the broader community continue. Note also that, in accordance with common practice, all the new proposed properties are prefixed with "-webkit-" in our WebKit prototype. For the sake of simplicity, I have omitted this prefix in the rest of the article.

Now, let's dive into the proposed extensions. They can be divided into four categories:

• 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.
  Read more at : http://www.adobe.com/devnet/html5/articles/css3-regions.edu.html