Adobe has revealed a web browser. Adobe isn’t actually getting into the web browser game, but it does have a little tricks it would like to show off to the globe. Adobe’s new demo web browser exists exclusively to exhibit the company’s planned CSS Regions layout device. You can check out the sample browser, head over to Adobe Labs and download a copy. Be sure to open up the integrated sample pages to observe how the HTML and CSS is arranged.
Adobe has been working on CSS Regions for some time, trying to develop a set of CSS layout tools that formulate it simple to construct complex, print-style layouts on the web — think text that flows around circular regions, or text structured into shapes. If Adobe can influence browser makers and the W3C to obtain onboard with the scheme, web design might be about to make a vast leap ahead. Or backward, depending on how you look at it. Adobe’s CSS Regions application is a back-to-the-future attempt to transport some of the layout tools print designers have enjoyed for years to the web.
While web developers have hacked together grids and other print-style layout tools for years, such tools are fundamentally 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 methods. We’ve looked at the Flexible Box Model, Template Layout, and Grid Positioning modules before, but so far not any are finalized.
Adobe’s CSS Regions is the novel entrance in the record of layout formats under contemplation. Adobe submitted its CSS Regions proposal to the W3C early this year and it has consequently been split into two disconnect but connected drafts, the CSS Regions Module Editor’s Draft and the CSS Exclusions Module Editor’s Draft.
CSS Regions splits some similarities with the other proposals, 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 stream text into a region — say, as below, a pie graph — or around a region.
Among the interesting layout tools in the CSS Regions proposal are Story Threading, Region Styling and the arbitrary shapes and exclusions thought. Story Threading permits text to flow in numerous disorderly shapes which you can define in CSS and HTML. That means you could effortlessly run two side-by-side columns of text around an image or a pull quote 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.