Printer-Friendly HTML Pages
One way to ensure that your users can get a good copy of your content to-go is to link to a separate “printer-friendly” HTML document especially for printing. In general, printer-friendly pages are stripped-down versions containing just a single column of content with minimum HTML formatting. Figure 5-1 shows pages from two web developer resource sites and their corresponding printed pages.

Figure 5-1. Two web pages and their corresponding printer-friendly versions
The following sections detail some steps you can take to design printer-friendly pages. Of course, if you anticipate that your audience will want to do a lot of printing from your site, you may choose to design your original pages according to the same printer-friendly guidelines.
Keep the Page Narrow
The most common problem with printing web pages is that the right edge can get cropped off. This happens when the page is fixed at a pixel width (using a table) or contains graphics such as a navigation bar that is wider than the printable area of the page.
So how wide is too wide? If you want to be absolutely sure that no content slips off the edge for anyone, keep the width of tables and graphics under 550 pixels. An even more conservative approach is to use HTML text only (with no tables fixing the page width) and only minimal graphics.
Browsers that shrink the page to fit the printable area can ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access