Ну, я даже не уверен, что это можно сделать с моим текущим подходом. Я пытаюсь соответствовать содержимому HTML-документа на страницах, которые являются размером текущего видового экрана. В настоящее время я делаю это, повторяя все элементы документа и проверяя, находится ли их верхнее смещение в пределах границы текущей страницы, когда это не так, это смещение становится началом новой страницы, а граница страницы устанавливается на это смещение плюс высота видового экрана.Разделите HTML на страницы, разделите длинные абзацы
Проблема, с которой я сталкиваюсь, состоит в том, что часто будет элемент (например, абзац), высота которого больше самого окна просмотра, поэтому, даже если алгоритм помещает этот элемент в начало новой страницы, его содержимое будет переполнено. Я пытаюсь найти способ разбить такие элементы таким образом, чтобы первый фрагмент занимал оставшуюся часть страницы.
Это создает дополнительные трудности. Даже если бы я мог найти способ определить, какая часть текста абзаца по-прежнему подходит для остальной части страницы, и это само по себе оказалось довольно сложным, у меня все равно возникла бы проблема с обновлением DOM без разбора абзац, который испортил бы вычисление следующей страницы или, по крайней мере, заставил бы меня сломать рекурсию, которая еще больше усложнила бы алгоритм.
Любые предложения о том, как разделить абзац таким образом, что первый фрагмент занимает оставшееся место на странице, приветствуются. Это мой код до сих пор:
EDIT:Стоит отметить, что это будет работать только на очень простой HTML, на котором нет абсолютно позиционируется или плавал элементы. Это не проблема в моем случае.
var elementIndex = -1;
var pages = 1;
var pageBoundary = 0;
var pageBreaks = [];
function calculatePages() {
//first page boundary is window height
pageBoundary = $(window).height();
//do calculations
iterateElements($("body"));
//print results
console.log(pageBreaks);
}
function iterateElements(parent) {
$.each($(parent).children(), function(i, e) {
//increase current element index
elementIndex = elementIndex + 1;
//get element's top offset
var offsetTop = $(e).offset().top;
//get the last position that the element occupies
var elementSpan = offsetTop + $(e).outerHeight();
if ($(e).children().length == 0) { //only leaf nodes will be set as page breaks
//element's start position is outside page boundary
if (offsetTop >= pageBoundary) {
//mark page start with red in order to visualize
$(e).attr("style", "border-top: 1px solid red");
//increase page count
pages = pages + 1;
//new page starts at element's top, next page boundary
//is element's starting position plus the viewport's height
pageBoundary = offsetTop + $(window).height();
//store index of page break
pageBreaks.push(elementIndex);
}
//element's start position is inside current page, but contents overflow
else if (elementSpan >= pageBoundary) {
//NO IDEA WHAT TO DO HERE
//NEED A WAY TO SPLIT LARGE ELEMENTS
}
}
iterateElements(e);
});
}
$(function() {
calculatePages();
});
Одним из наивных подходов было бы рассчитать размер 1/2 слова из абзаца и посмотреть, подходит ли это, если так расколоть большой абзац на два, иначе раскол снова. –
Да, это был мой первоначальный подход. Проблема в том, что на следующей странице может быть оставлено несколько фрагментов абзаца, что изменит нормальный поток текста. Кроме того, поскольку DOM не обновляется до тех пор, пока функция не вернется, кажется, что нет способа проверить, соответствует ли 1/2 слова на странице, не нарушая рекурсии. – JayPea
Если один абзац больше, чем целая страница, очевидно, что параграфы будут разделены. Что касается рекурсии, то, как правило, рекурсия является неправильным ответом на проблему в любом случае. –