Printed Height of HTML Document

HTML Tutorials - Herong's Tutorial Examples

∟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) 2014 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".

First, vertical scaling is applied with the same scaling factor as the horizontal direction to maintain the aspect ratio of the HTML document.
When rendering HTML contents near the bottom of the paper, "page break" CSS properties are considered avoid certain HTML elements being broken into two pieces. A good example is an image element, which will force the "page break" occurs early, leaving extra white space at the bottom of the page.