HTML Tutorials - Herong's Tutorial Examples - v2.30, by Herong Yang
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".
The picture below shows you an example of printed HTML document with no scaling and early page break to keep images as whole.
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