Ebook pagination and CSS

Let's suppose you have a rather long document, for instance a book chapter, and you want to render it in your browser à la iBooks/Kindle. That's rather easy with just a dash of CSS:

body {
height: calc(100vh - 24px);
column-width: 45vw;
overflow: hidden;
margin-left: calc(-50vw * attr(currentpage integer));

Yes, yes, I know that no browser implements that attr()extended syntax. So put an inline style on your body for margin-left: calc(-50vw * <n>) where <n> is the page number you want minus 1.

Then add the fixed positioned controls you need to let user change page, plus gesture detection. Add a transition on margin-left to make it nicer. Done. Works perfectly in Firefox, Safari, Chrome and Opera. I don't have a Windows box handy so I can't test on Edge.


1. On Tuesday 19 January 2016, 06:46 by Richardigp

We use pretty much this technique with the AZARDI ePub3 reader. We did that in 2011 before VH and VW were invented so we have a load of div contains. This simplifies thing very nicely. The minus 1 tip is great. We will test your code up with a few more challenges such as long tables, Left-Right floating blocks and of course 2016 interactivity such as popup notes, footnotes and glossaries. The other advantage of this simple presentation is that scrolling mode can be incorporated easily and quickly with a CSS change. Our experience is that K12 highly interactive content on any mobile device needs a scrolling mode.