Printed Width of HTML Document

This section provides a tutorial example on the printed width of an HTML document. If the content is less than the width of the printed paper, there is no scaling. One inch image is printed as one inch on paper.

By default, Web browsers will adjust HTML document content layout, like wrapping text lines, to make the content width matches the screen width. However, some content elements have minimum widths that can not be reduced, like a long text string with no spaces to break and wrap, a large image, a table row with many columns. Those element will result a page content with a larger width.

When the content that is larger than the screen width, it will display a scroll bar to allow you to scroll the content horizontally. But what will happen if the same Web page is printed on a paper? Will the content be scaled down to fit the width of the paper? Or will the content being divided and printed on multiple pages?

The answer depends on which Web browser and printer you are using. In most cases, the content will be scaled down to a certain degree. If the content is still wider than the printed paper, the extra content will be truncated.

For example, if I open the HTML document described in the previous tutorial, Screen-Resolution-Horizontal-Test.html, with Safari on my macOS computer, and print it on a "US Letter" (8.5 x 11 in) paper, I will get only 1 page of content with 12 inches or 1150 pixels plus margins printed horizontally on the 8.5 inch wide paper.

So the Web page content scaled down about 67% (8 : 12 ratio). And extra content after the 12 inch width is truncated.

Of course, if the page content is less than the paper width, no scaling will be applied. To test out this behavior, I wrote another version of the test HTML document, with less contents:

<!DOCTYPE html>
<!-- Printer-Resolution-Horizontal-Test.html
 - Copyright (c) HerongYang.com. All Rights Reserved.
-->
<html><head>
<title>Screen Resolution: PPI (Pixel Per Inch)</title>
</head><body style="margin: 0px; padding: 0px">
<h4>Test on Screen Resolution: PPI (Pixel Per Inch)</h4>

<table border="0" cellspacing="0" cellpadding="0">
<tr><script>
for (i=1; i<8; i++) {
  document.write('<td><img src="Image-of-100-x-50-Pixel.png"'
    + ' width="100px" height="50px"></td>');
}
</script></tr>
<tr><script>
for (i=1; i<8; i++) {
  document.write('<td style="text-align: center; font-weight: bold;">'
    + (i*100) + ' px</td>');
}
</script></tr>
</table>

<table border="0" cellspacing="0" cellpadding="0">
<tr><script>
for (i=1; i<9; i++) {
  document.write('<td><svg xmlns="http://www.w3.org/2000/svg"');
  document.write('width="1.0in" height="0.5in" viewBox="0 0 100 50"'
    + ' stroke="rgb(255,0,0)" stroke-width="4">');
  document.write('<line x1="0" y1="48" x2="100" y2="48"/>');
  document.write('<line x1="50" y1="50" x2="50" y2="35"'
    + ' stroke-width="3"/>');
  document.write('<line x1="0" y1="50" x2="0" y2="30"/>');
  document.write('<line x1="100" y1="50" x2="100" y2="30"/>');
  document.write('</svg></td>');
}
</script></tr>
<tr><script>
for (i=1; i<9; i++) {
  document.write('<td style="text-align: center; font-weight: bold;'
    + ' color: #ff0000;">'+i+' in</td>');
}
</script></tr>
</table>

</body></html>

If I open and print this HTML document on a "US Letter" (8.5 x 11 in) paper, I will get only 1 page of content with 8 inches or 768 pixels plus margins printed horizontally on the 8.5 inch wide paper. This time, the content is not scaled at all!

The picture below shows you two examples of horizontal resolution on printed papers. The first one has the HTML document scaled down to 67%. The second one has no scaling.

Printed Width of HTML Document
Printed Width of HTML Document

Conclusions:

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