Printed Height of HTML Document

This section provides a tutorial example on the printed height of an HTML document. If the content is longer than the height of the printed paper, page break occurs. Early page breaks may happen to keep images and some other HTML element as whole.

In the previous tutorial, we have looked at the horizontal resolution of an HTML document. We found out that the printed width of an HTML document is not scaled if it is less than the width of the printed paper. But the HTML document can be scaled up to 67% if it is wider that the paper.

Now let's look at the at the vertical resolution of an HTML document with another HTML document, display 2 rulers vertically: one in unit of pixels and one in inches.

<!DOCTYPE html>
<!-- Screen-Resolution-Vertical-Test.html
 - Copyright (c) HerongYang.com. All Rights Reserved.
-->
<html><head>
<title>Screen Vertical Resolution</title>
</head><body style="margin: 0px; padding: 0px">

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<h4 style="writing-mode: vertical-lr; text-orientation: upright;
  height: 600px">
  Test on Screen Vertical Resolution</h4>
</td>

<td valign="top"><table border="0" cellspacing="0" cellpadding="0">
<script>for (i=1; i<31; i++) {
document.write('<tr><td><img src="Image-of-50-x-100-Pixel.png"'
  + ' style="width: 50px; height: 100px; vertical-align: bottom;"></td>');
document.write('<td style="text-align: center; font-weight: bold;">'
  + '<p style="writing-mode: vertical-lr; text-orientation: upright;'
  + ' height: 80px;">' + (i*100) + ' px</p></td></tr>');
}</script>
</table></td>

<td valign="top">
<table border="0" cellspacing="0" cellpadding="0">
<script>
for (i=1; i<31; i++) {
  document.write('<tr><td><img src="Image-of-50-x-100-Pixel-Red.png"'
    + ' style="width: 0.5in; height: 1in; vertical-align: bottom;"></td>');
  document.write('<td style="text-align: center; font-weight: bold;">'
    + '<p style="writing-mode: vertical-lr; text-orientation: upright;'
    + ' height: 80px; color: #ff0000;">' + i + ' in</p></td></tr>');
}
</script>
</table>
</td>
</tr>
</table>

</body></html>

When I printed it on a "US Letter" (8.5 x 11 in) paper, with 100% scale and no header/footer. The result was pretty good. I saw 10 inches (900 pixels) printed vertically on the 11 in long paper.

However, I saw about 0.75 inches of extra white space left on the bottom of the paper. If the bottom margin is 0.25 inches, there are still 0.50 inches of space that could be used to print half of the one-inch image.

What the browser is doing at the bottom of the printed paper is called "page break". There are two main rules used in performing a "page break".

The picture below shows you an example of printed HTML document with no scaling and early page break to keep images as whole.

Printed Height of HTML Document
Printed Height of HTML Document

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