Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML book-like pagination

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.

like image 243
hpique Avatar asked Sep 03 '10 13:09

hpique


1 Answers

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...

like image 79
Engin Kurutepe Avatar answered Sep 23 '22 17:09

Engin Kurutepe