Adobe Envisions Brave New World of Web Layouts With ‘CSS Regions’

The CSS Regions Galaxy Tab demo

It’s cold here in the Webmonkey offices, Adobe has unveiled a web browser. No, Adobe isn’t really getting into the web browser game, but it does have a few tricks it would like to show off to the world. Adobe’s new demo web browser exists solely to demonstrate the company’s proposed CSS Regions layout tool.

If you’d like to check out the demo browser, head over to Adobe Labs and download a copy. Be sure to open up the included sample pages to see how the HTML and CSS is structured.

Adobe has been working on CSS Regions for some time, trying to develop a set of CSS layout tools that make it easy to build complex, print-style layouts on the web — think text that flows around circular regions, or text structured into shapes. If Adobe can convince browser makers and the W3C to get onboard with the idea, web design might be about to make a huge leap forward. Or backward, depending on how you look at it.

Adobe’s CSS Regions proposal is a back-to-the-future effort to bring some of the layout tools print designers have enjoyed for years to the web.

Typography on the web has improved by leaps and bounds since the dark days of the blink tag and six universal fonts, but it’s still a long way from ideal. Sure there are great ways to serve custom fonts, and you can even use JavaScript libraries like Lettering.js for even more control over your layout. But when it comes to the flow of text around images, pull quotes and other block level elements, well, web typography falls apart.

While web developers have hacked together grids and other print-style layout tools for years, such tools are essentially hacks and limited in their capabilities. But that will change in the near future. The W3C is currently toying with no less than four new grid-based standards designed to handle multi-column text, wrapping text around images and other fancy layout techniques. We’ve looked at the Flexible Box Model, Template Layout (based on Mozilla’s XUL syntax), and Grid Positioning modules before, but so far none are finalized.

Adobe’s CSS Regions is the new entry in the list of layout schemes under consideration. Adobe submitted its CSS Regions proposal to the W3C early this year and it has subsequently been split into two separate but related drafts, the CSS Regions Module Editor’s Draft and the CSS Exclusions Module Editor’s Draft.

CSS Regions shares some similarities with the other proposals (and from what I can tell would play nice with them if multiple proposals end up becoming finalized specs), but goes a good bit further, by abstracting sections of an HTML page into “regions.”

Regions can be both positive and negative space. In other words, you can write CSS rules to flow text into a region — say, as below, a pie graph — or around a region (as in the image of Arches National Park at the top of this post).

Inserting text into regions

Among the interesting layout tools in the CSS Regions proposal are Story Threading, Region Styling and the arbitrary shapes and exclusions concept. Story Threading allows text to flow in multiple disjointed shapes (not just columns) which you can define in CSS and HTML. That means you could easily flow two side-by-side columns of text around an image or a pullquote the way print magazines often do.

The second interesting element is Region Styling, which allows content to be styled based on the region it flows into. For example, if the first few lines of your text fall into one region, you could style it with a different font than the rest, which falls in a different region. Curiously, this part of the proposed Regions spec is not currently implemented in Adobe’s demo browser.

The arbitrary content portion of the draft spec is what allows the layout shown in the screenshots above — flowing content into or around arbitrary shapes.

Lest you think that Adobe is simply trying to improve the web — which may well be true — nevertheless, it’s worth bearing in mind Adobe’s own agenda. We suspect it’s no accident that the company has used WebKit to power the CSS Regions testing browser. WebKit is, after all, the engine that powers the iPad’s web browser.

With Apple banning Flash from its iOS devices, Adobe has little in the way of iPad-friendly tools to offer its big magazine clients. Given that publishers are betting heavily on the iPad’s ability to save their business model, the more iPad tools Adobe can offer, the happier magazine publishers will be. By rolling CSS Regions into WebKit for a demo, Adobe is already one step closer to a toe-hold on iOS devices.

Still, in this case, assuming the W3C pushes forward with the Regions spec, and that browser makers include support in future releases, what’s good for Adobe may end up being good for the web as a whole.

Of course whether or not multi-column layouts on the iPad (or any other web browser) are a good idea is open to debate. Multiple columns combined with scrolling often makes for a reading nightmare. Certainly in the hands of poor designers the results will be ugly, but that doesn’t mean the tools themselves are to blame.

See Also: