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) 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.

Pagination Control of HTML Documents
Pagination Control of HTML Documents

Table of Contents

 About This Book

 Introduction of HTML

 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

 Display Size of Image

 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

 References

 Full Version in PDF/EPUB