これが私の現在のアプローチで実行できるかどうかさえわかりません。HTML ドキュメントのコンテンツを現在のビューポートのサイズのページに収めようとしています。私は現在、ドキュメントのすべての要素を繰り返し処理し、それらの上部オフセットが現在のページの境界内にあるかどうかを確認することでこれを行っています。そうでない場合は常に、このオフセットが新しいページの開始になり、ページ境界がこのオフセットに設定されますプラス ビューポートの高さ。
私が直面している問題は、高さがビューポート自体よりも大きい要素 (段落など) が頻繁にあるため、アルゴリズムがこの要素を新しいページの先頭に配置しても、その内容がオーバーフローすることです。 . 最初のスライスがページの残りの部分を占めるように、そのような要素を分割する方法を見つけようとしています。
これはさらなる困難をもたらす。段落のテキストがページの残りの部分にどのくらい収まるかを判断する方法を見つけたとしても、これ自体が非常に難しいことがわかったとしても、段落を分割した直後に DOM が更新されないという問題がまだ残っています。次のページの計算を台無しにするか、少なくともアルゴリズムをさらに複雑にする再帰を壊さなければなりません。
最初のスライスがページの残りのスペースを占めるように段落を分割する方法についての提案は大歓迎です。これまでの私のコードは次のとおりです。
編集: これは、絶対配置または浮動要素がない非常に単純な 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();
});