Text automatically flows across divs

[nora00]

Good afternoon Peeps,
I am still working on a little game and on this particular scene the user scrolls through some historical documents. I have created several divs to align with the image of antique paper. I have about 15 documents each with 3-5 pages - so that is about 60 divs I would have to create and call upon when the user asks to view it so you can see why it would be nice to make it automatic.

So, is it possible to insert the text I want onto the first div and have it flow down to the other blank sheets automatically? I found a jquery code that sort-of does what I want but it depends on me breaking it into

elements which will make it choppy.

http://jsfiddle.net/nate/F8zPs/1/

Attached is the simplified version - but as you see it is wonky and doesn’t really work all the way through.

ArchivesQuest-ShareVersion.hypetemplate.zip (437.5 KB)

[jonathan (Jonathan Deutsch)]

The code works by taking paragraphs in a block of text and then splitting them up individually and placing into an element with the column class. It doesn’t take into account the size of the text at all, just each top-level paragraph tag. It looks like you have that working in Hype, but as the text in the first paragraph is much longer than the image it is displaying over other pages.

I personally don’t know what other libraries there are that help with this specific problem, but there are some javascript libraries that can help determine font metrics on the fly and then in theory you could write code to determine when to split.