␡
- Creating Pages from Linear HTML Text
- Getting Started
- Solution Overview
- Test Drive
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Solution Overview
The underlying idea of the page creation solution is very simple:
- For each page in the document, use DOM methods to create a DIV tag dynamically, just before the first element of the new page (in most cases, that would be the H2 tag).
- Change all HTML elements following the new DIV tag to child elements of the DIV tag, until you reach the end of content or a page boundary.
To make it easier for you to adapt the JavaScript solution to your needs, I’ve structured the code so that you can change the assumptions:
- The findPaginationStart function should return the element just prior to the pagination starting point (for example, the H1 tag). Alternatively, you can modify the firstPageStart function that returns the first element to be paginated.
- The endOfContent function should indicate when the pagination should stop. Usually it should be performed until the end of the content DIV tag or the table cell.
- The newPageStart function checks whether the current HTML element should start a new page. For example, it would return true if the current element is an H1 or H2 tag.
- Finally, the setDivAttributes function sets the attributes of the page DIV tags. In my implementation, the class is set to page and id is set to pageX (X being the page number) to comply with the requirements of the screen pagination code.
The main pagination routine uses the four functions just described to do its work:
- It finds the first element to be paginated.
- For all elements that have to be paginated, it moves them under the current page DIV element (creating the DIV element if a new page should be started).
The core of the pagination routine is the migration of HTML elements into the DIV blocks. This operation is performed in three steps:
- The next element in the text is saved. (This information is lost after the current element is removed from the DOM tree.)
- The current element is removed from the DOM tree and reinserted as the last child of the current DIV page. (The remove-and-insert operation averts the need to clone the current element.)
- The routine proceeds to the previously saved next element.
Listing 1 shows an annotated version of the pagination.
Listing 1 Main pagination routine.
function doPagination() {
var ep = firstPageStart() ; // elementPosition abbreviated to ep
var pageDiv ;
if (!ep)
throw "Cannot find the first element to paginate" ;
while (! endOfContent(ep)) {
if (newPageStart(ep) || (! pageDiv)) {
pageDiv = document.createElement("div");
setDivAttributes(pageDiv) ;
// Insert the new page DIV in front of the current element
ep.parentNode.insertBefore(pageDiv,ep);
}
// Save the next element
var nextElement = ep.nextSibling;
// remove the element from the linear text
ep.parentNode.removeChild(ep);
// insert the element into the page DIV
pageDiv.appendChild(ep);
// proceed to the next element
ep = nextElement;
}
}
The pagination routine should be called after the document load has been completed (in the document.onload handler) and before the page display routine is called.