Double Page Layout?

[tf]

Hi,

we would like to display two pages in landscape mode. Do you think this might be possible with Monocle? I am currently in the process of getting to know the source code to find out whether CSS columns might be used to this end.

Do you see any conceptual obstacles?

Regards, Tim

[joseph]

You could pursue two avenues: one is to have a set-up like the slider flipper, but with four iframes (left-current, right-current, left-next, right-next). But to me that seems very close to madness. Loading four iframes with content every time a component changes will be very slow, and consume a lot of memory on mobile devices.

You could try using columns, but due to your need for a spinal column gap between the two "pages", most of the existing calculations in Monocle will be invalidated. I've recently abstracted all of those calculations into a separate class (src/dimensions/columns.js), so it shouldn't be too hard to replace that piece and write a custom flipper.

To me that still leaves a few unresolved questions, more for you than me:

• What would a page turn animation look like? If you're planning to "fold" the pages in the middle in a book-like way, you pretty much have to throw out the second approach above and go back to the first.
• When someone resizes or reorients their browser window so that it is mostly portrait, what do you do? I've had "dynamically switching between flippers" in the too-hard basket since about February, and that's not likely to change. So your flipper and dimension classes are going to really earn their crust.
• Similarly, what if someone makes their browser window small (or views it on a Blackberry, for eg)? By its nature, two-page view is pretty wasteful of space. In fixed size browsers (ie, mobile browsers) arguably this is not such a problem, since you can detect them and serve them the normal slider flipper instead.

[tf]

Thank you for your prompt reply. I will look into these issues and keep you posted.

[NeomMob]

2 pages can be really interested in widescreens. Does anybody made progress on this topic?

Thanks!

[tf]

We ultimately decided to roll our own solution since further requirements came up. I therefore haven't had the chance to further investigate this issue in the context of monocle. But based on my first impressions, I would second the concerns voiced in the above post by joseph.

[joseph]

Yep, no change on this one. Happy to consider contributions of course.

@tf: are you open-sourcing your own? What were the further requirements, if I may ask?

[tf]

Sorry for the delayed answer. We needed to build a framework of visual effects, including large images and videos. This made the iframe approach loading multiple copies of the page rather unattractive. Furthermore, we needed closer coupling between the document contents and the app framework - the opposite of what one would normally want to achieve when building a reader application.

We ended up implementing a pager. On top of that we've built functionality to load chunks of HTML on demand and place it in the pager.

All of this is part of a closed source project at the moment. I would really like to publish certain parts under an open source license. But this will have to be discussed with our customer.

[kamilgolunski]

Any update on this topic?

[ssomnoremac]

Try using the double_pages.js from the TEA-ebook project. Even though they don't give credit, it's basically the same as Monocle.js, using the same flippers, except you'll have to change the references from 'App' to 'Monocle' after you convert the whole file to normal javascript and add it to monoctrl.js at the end.

You'll have to also change the width of .monelem_page to 50% and monelem_page.right left: 50%;