Как разбить текст на страницы в браузере?

Question

Предположим, у меня есть текст «Война и мир» в переменной wandp.

Есть ли способ написания функции такой, чтобы page(n) возвращал точно правильный объем текста для заполнения текущего окна браузера, где n - это индекс символов в wandp.

Я хочу, чтобы текст был правильной, то есть без значительных пробелов или полос прокрутки.

Полагаю, я ищу текстовое описание алгоритма электронных книг для браузеров.

P.S. Я уверен, что есть сложности в главах и других функциях макета, но они могут подождать.

Answer 1

Заимствуя идею из Подумайте, сколько символов может поместиться в DIV с помощью JavaScript , я бы создал скрытый <div> и установил бы ширину этого элемента равной ширине окна браузера. Затем я бы создал функцию для добавления текста из wandp, проверяя высоту элемента <div> при добавлении, пока высота элемента <div> не станет равной высоте окна браузера.

Это может выглядеть примерно так:

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

Имейте в виду, это приведет к обрезанию текста, так как он будет доходить до абсолютного последнего символа, который будет соответствовать ограничениям. Вам понадобится немного креатива, чтобы закончить текст на странице разумным символом (последний встреченный период, перед последним обнаруженным пробелом и т. Д.).