Monday, June 27

Flow like that!

Finally got around to testing out the Adobe CSS Regions Prototype today. And boy was that fun fun fun! As a proof of concept it is really stunning to see how well it handles text-flows between containers especially, but also around regions or objects - in multiple layers or stacks just like InDesign.

The download can be found in the Adobe Labs - it is basically a tweaked version of Webkit along with some sample html pages and the documentation that mirrors the intro article from early in May.

For setting up a flow all you need are a couple of target DIV's and two lines of CSS!

One for setting up the content source;
-webkit-flow: "main-thread"

And another for assigning it to the blocks; content:from(main-thread)

From looking at the FT.com webapp javascript code, and thinking about how I would attack it in terms of parsing the text, duplicating tags etc - this is scary simple.

One caveat is that, at least for now, you loose the ability to "target" the text in each container separately. You can adjust anything relating to the block element itself (margin, padding, background) - but CSS related to the actual flowing content has no effect. That means only one style for font-size, color etc. Which I'm sure makes sense from a performance standpoint on window resize, but is a bummer in terms of recreating a "true" magazine feels like a Wired page.

Hopefully that is something that could be added - but would require a bit more integration into the CSS rendering and parsing engine. Right now it looks like the content blocks are added as new containers (no inspector included in the custom build)

And it is important to note that it is actually CONTENT blocks - not just text level elements, but also images inline in the flow are slotted into the 'right' container.


On a sidenote; I'd love to see how aside works in the browser not just on the iPad, but that means bypassing their eight-step browser-sniffing script (reproduced at jsbin) in some meaningful yet simple way... guess I could try firebug breakpoint and just replacing the values?


- ....and the sun shines brightly outside despite the watch showing nine in the evening, summertime is really here again...