HTML book-like pagination

javascript html css webkit pagination
hpique picture hpique · Sep 3, 2010 · Viewed 25.2k times · Source

How can I split the content of a HTML file in screen-sized chunks to "paginate" it in a WebKit browser?

Each "page" should show a complete amount of text. This means that a line of text must not be cut in half in the top or bottom border of the screen.

Edit

This question was originally tagged "Android" as my intent is to build an Android ePub reader. However, it appears that the solution can be implemented just with JavaScript and CSS so I broadened the scope of the question to make it platform-independent.

Answer

Engin Kurutepe picture Engin Kurutepe · Oct 4, 2010

Building on Dan's answer here is my solution for this problem, with which I was struggling myself until just now. (this JS works on iOS Webkit, no guarantees for android, but please let me know the results)

var desiredHeight;
var desiredWidth;
var bodyID = document.getElementsByTagName('body')[0];
totalHeight = bodyID.offsetHeight;
pageCount = Math.floor(totalHeight/desiredHeight) + 1;
bodyID.style.padding = 10; //(optional) prevents clipped letters around the edges
bodyID.style.width = desiredWidth * pageCount;
bodyID.style.height = desiredHeight;
bodyID.style.WebkitColumnCount = pageCount;

Hope this helps...

Related questions

How do I re-trigger a WebKit CSS animation via JavaScript?

So, I've got this -webkit-animation rule: @-webkit-keyframes shake { 0% { left: 0; } 25% { left: 12px; } 50% { left: 0; } 75% { left: -12px; } 100% { left:0; } } And some CSS defining some of the animation rules on my box: #box{ -webkit-animation-duration: .02s; -webkit-animation-iteration-count: 10; -webkit-animation-timing-function: linear; } I can shake the #box like …

Read More
Extract the current DOM and print it as a string, with styles intact

I'd like to be able to take my DOM, as is, and convert it to a string. Let's say I open up the inspector and make a change to the margin-left property of a particular element. That change should be …

Read More
Disable pinch zoom in webkit (or electron)

Is there any way to disable pinch zoom in an electron app? I can't get it to work from inside the web-view with normal javascript methods as described here: https://stackoverflow.com/a/23510108/665261 It seems the --disable-pinch flag is not …

Read More