将HTML分为页面，分成长段 [英] Divide HTML into pages, split long paragraphs

问题描述

我什至不确定我目前的方法是否可以做到这一点.我正在尝试将HTML文档的内容放入当前视口大小的页面中.我目前正在通过遍历文档的所有元素并检查其顶部偏移量是否在当前页面的边界内来进行此操作，无论何时，偏移量都将成为新页面的开始，并且页面边界设置为该偏移量加上视口的高度.

Well I'm not even sure if this can be done with my current approach. I'm trying to fit the contents of an HTML document into pages that are the size of the current viewport. I'm currently doing this by iterating through all of the document's elements and checking whether their top offset is within the current page's boundary, whenever it is not, this offset becomes the start of a new page and the page boundary is set to this offset plus the viewport's height.

我面临的问题是，经常会有一个元素(例如一个段落)的高度大于视口本身，因此即使算法将该元素放在新页面的开头，它的内容将溢出.我正在尝试找到一种方式来拆分此类元素，以使第一个切片将占据页面的其余部分.

The problem I'm facing is that often there will be an element (a paragraph, for example) whose height is larger than the viewport itself, so even if the algorithm places this element at the start of a new page, its contents will overflow. I'm trying to find a way to split such elements in a way that the first slice will occupy the remaining part of the page.

这带来了进一步的困难.即使我可以找到一种方法来确定段落的文本仍然适合页面的其余部分，并且这本身已被证明非常困难，但我仍然会遇到这样的问题:DOM分割后无法立即更新段落，这会搞乱下一页的计算，或者至少迫使我破坏递归，这会使算法更加复杂.

This presents further difficulties. Even if I could find a way to determine how much of a paragraph's text still fits within the remainder of a page, and this in itself has proven to be quite difficult, I would still have the problem of the DOM no updating immediately after splitting the paragraph, which would mess up the calculation of the next page or at least force me to break the recursion which would complicate the algorithm even more.

任何有关如何以第一个分片占用页面上剩余空间的方式拆分段落的建议.到目前为止，这是我的代码:

Any suggestions on how to split a paragraph in a way that the first slice takes up the remaining space on the page are welcome. This is my code so far:

值得注意的是，这仅适用于没有绝对定位或浮动元素的非常简单的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();
});

推荐答案

我做了类似的事情.我采取的方法是检查页面容器的高度.如果它大于最大值，我知道需要将元素移到下一页.

I have done something similar to this. The approach I took is to check the height of the page container. If it was greater than the max, I know elements need to be moved to the next page.

如果有多个元素，我可以将最后一个元素移到下一页.

If there are multiple elements, I can move the last element to the next page.

如果只有1个元素，则需要拆分.让我们将此元素称为X.因此，您可以在下一页中创建一个新的段落/节，让我们将该元素称为Y.您现在可以将单词或字符从X元素的末尾移动到Y元素的开始，直到元素的高度. X适合页面.

If there is only 1 element, it needs to be split. Let's call this element X. So you can create a new paragraph/section in the next page, let's call that element Y. You can now move words or characters from the end of element X to the start of element Y until the height of element X fits into the page.

此后，您可以重复下一页.

After this you can repeat for the next page.

这篇关于将HTML分为页面，分成长段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！