HTML Tutorials - Herong's Tutorial Examples - v2.30, by Herong Yang
Pagination Control of HTML Documents
This section provides a tutorial example on how to control pagination on printed version of HTML documents. One option is to use 'div' elements, one per page, with each 'div' set to the printable area size on the paper.
Even though HTML documents are mainly for browsers to display on screen. They are not required to have perfect printed versions in most cases.
However, if you are required to construct a Web page that appear perfectly on the printed paper. And the displayed version must match the printed version. In other words, the Web page needs to be WYSIWYG (What You See Is What You Get).
Here are some thoughts on how to do this with "div" elements:
Let's implement this with an example HTML document:
<!DOCTYPE html> <!-- Pagination-with-DIV-Elements.html - Copyright (c) 2014 HerongYang.com. All Rights Reserved. --> <html><head> <title>Pagination with DIV Elements</title> </head><body style="margin: 0px; padding: 0px;"><script> pages = 3; for (i=1; i<=pages+1; i++) { // paper: 8.50x11.00in; margin: 0.35 0.25 0.55 0.25; div: 8.00x10.10in document.write('<div style="width: 8.00in; height: 10.10in;' + ' overflow: scroll; background-color: #eeeeee;' + ' border: 1px solid #ff0000">'); document.write('<table cellspacing="0" cellpadding="0">'); document.write('<tr>'); document.write('<td><img src="Image-Of-Square.png"' + ' style="width: 1in; height: 1in; vertical-align: bottom;"/></td>'); document.write('<td>'); for (j=0; j<=20; j++) document.write('<img src="Image-Of-Square.png"' + ' style="width: 1in; height: 1in; vertical-align: bottom;"/>'); document.write('</td>'); document.write('</tr>'); document.write('<tr>'); document.write('<td style="vertical-align: top;">'); for (j=0; j<=9; j++) document.write('<img src="Image-Of-Square.png"' + ' style="width: 1in; height: 1in; vertical-align: bottom;"/>'); document.write('</td>'); document.write('<td style="vertical-align: top;">'); document.write('<h4>Pagination Test with DIV Tags - Page: '+i+'</h4>'); document.write('<p>'); for (j=0; j<=7; j++) document.write('LineStringToCreateHorizontalOverFlow_'); document.write('</p>'); for (j=0; j<=10; j++) { document.write('<p>'); for (k=0; k<=25; k++) document.write('The quick brown fox jumps over the lazy dog. '); document.write('</p>'); } document.write('</td>'); document.write('</tr>'); document.write('</table>') document.write('</div>'); } </script></body></html>
If you print this HTML document from your browser on a US Letter (8.5x11 inch) paper, you will get a perfect printed version with the same appearance as the displayed version.
The picture below shows the printed version of the above HTML document.
Table of Contents
Introduction of HTML5 Features
HTML Document Structure and Content
HTML Document and Elements Syntax
►Displayed and Printed HTML Documents
Differences between Displayed and Printed HTML Documents
Default Font Family and Font Size
Printed Width of HTML Document
Printed Height of HTML Document
Text Paragraph Block Size and Overflow
►Pagination Control of HTML Documents
Responsive Design of Web Pages