Pfthb

Assume I have the text of War and Peace in a variable wandp.

Is there any way of writing a function such that page(n) would return exactly the correct amount of text to fill the current browser window, where n is a character index into wandp.

I want the text to be the correct amount, i.e. no significant whitespace or scrollbars.

I suppose I'm looking for a text description of an ebook algorithm for browsers.

P.S. I'm sure there are complications around chapters and other layout features, but they can wait.

Borrowing an idea from Work out how many characters can fit into DIV with JavaScript, I would create a hidden <div> and set the width of that element equal to the browser window width. Then, I would create a function to add text from wandp, checking the height of the <div> element as you append, until the height of the <div> element is equal to the browser window height.

It might look something like this:

HTML:

...
<div id="normalDiv" style="width: 100%; overflow: hidden"></div>
<div id="hiddenDiv" style="visibility: hidden; width: 100%;"></div>
...

Javascript:

...
var targetHeight = window.innerHeight - 40; //browser window height minus height of last line of text
var wandp = 'The entire content of War and Peace...';
var startChar = 0;
var endChar = 0;
for(var i=startChar; i < wandp.length; i++)
 endChar = i;
 document.getElementById('hiddenDiv').innerHTML += wandp.charAt(i);
 if (document.getElementById('hiddenDiv').clientHeight > targetHeight)
 endChar--;
 break;
 

document.getElementById('normalDiv').innerHTML = wandp.substring(startChar, endChar);
...

Keep in mind, this will result in cut-off text since it will go up to the absolute last character that will fit the constraints. You will need to get a little creative in order to end the text on the page at a reasonable character (last period encountered, before last whitespace encountered, etc).