Turns out when Adobe stops pouting about no one using Flash, they can still do some pretty interesting stuff.
Last month, Adobe released a prototype of an extension to CSS they're contributing to Webkit called CSS Regions, a way for front-end developers to more closely mimic print layouts and magazine-style formatting, even for fluid or changing layouts. It's actually pretty cool.
Content Flow
CSS Regions include a few different elements and paradigms which allow you to do some pretty crafty stuff. One of those, seen above, is source and region objects so that content can start in one place, flow to another place, and then another, even as the sizes of those objects change.
It works by creating an element you define as the source, which contains all of your content. You then define regions (divs, in the example above) that reference that source for their content. The browser then drops the source into the first region, flows into the second, and so on until it runs out of content or regions. You can also control the order using another parameter.
Shape Objects
Another interesting addition included as part of this prototype is shape regions, defined polygons that can either contain content, or exclude content. That lets you put text in a circular object, or have your text flow around a piece of an image...there's quite a bit of possibility.
Coming...Well, Not Soon
This is an early prototype, and, in fact, the downloadable code includes a tiny Webkit browser that runs the demo. The syntax will likely change, and there's actually no guarantee this will make it into a production browser. Google is apparently on board, at least in name, so if this gets into Webkit and then into Chrome in all likelihood Safari and then someday Firefox will pick it up (and then around 2025, IE).
You can check out the prototype or read the documentation from Adobe.
What do you think, solution to a problem that doesn't exist or something you'd like to use?
