Pagination Control of HTML Documents

HTML Tutorials - Herong's Tutorial Examples

∟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:

Remove margin and padding from the top element "root".
Build the Web page as a sequence of "div" elements.
Set each "div" to have the same size as the printable area of the printing paper. This should be the page size minus printing margin.
Set each "div" to be scrollable when overflow occurs, so that the content of each "div" stays inside the "div".

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.