Question

114

HTML book-like pagination

rated 0 times [ 115] [ 1] / answers: 1 / hits: 27050 / 14 Years ago, fri, september 3, 2010, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

toddbrandtc

Add To Favorites

Follow

Total Points: 400

Total Questions: 104

Total Answers: 90

Location: Antigua and Barbuda

Member since Wed, Aug 4, 2021

3 Years ago

answered 14 Years ago kevonmoisesf · Accepted Answer

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