CSS-Regions-Polyfill demo

[MaxZieb (Loves Hype)]

This technology known from InDesign and other layout programs was once in the works by Microsoft for the web. The idea was picked up by the Safari-Team at Apple, but it was ultimately dropped (at least at this time in history). I still think it is a really great idea and specially for Hype with its fixed size fields it could work. I put together a basic demo that reflows the text based on scaling the browser window. The technology reflows even HTML after breaking it apart. Hope this tech gets picked up in the future again.

Some years ago (source on the forum) I did a similar thing, but only with regular text. The following example on the other hand supports everything the Polyfill wanted to show off at the time …

---

Download:
CSS-Regions-Polyfill.hype.zip (13,7 KB)

---

Demo (resize browser window):
CSS-Regions-Polyfill.html

[JimScott]

Nice Max!

But I am not clear on its value… the reflow is great but that means, as I am seeing in this demo, there would be large blank spaces in the layout when going wide with the window as nothing else is adjusting.

Or am I missing the point here?

[jonathan (Jonathan Deutsch)]

Oh yes, I had forgotten about this CSS proposal. There was a request (via email) a month ago from a customer. I don’t think they’ll mind if I quote their use case:

We do not want to produce iBooks or ePUBs. Our eBooks produced in HYPE are stand alone.
They are highly interactive but contain no scrolling text fields. They are true electronic books.

Each page has its own text, but the text may continue on other pages. We have to currently use a manual method for making the text separation.

We would love to have a auto-flow text field like iBooks has.

@MaxZieb do you mind if I share your document with them?

[MaxZieb (Loves Hype)]

No… go right ahead. Eventually, I’d like to read the source and produce a pure JS version of this without the round trip of declaring it through CSS. That would make it easier to populate the regions directly from a data source. The example currently uses a DIV in the head region as we don’t have access to the body in Hype. Many regards from Berlin!

[jonathan (Jonathan Deutsch)]

Awesome, thanks!