Designing Web Page for Printing

Introduction
When somebody reads a web page that he finds interesting, he might want to be coming back to the web page; he might also consider the web page as a reference. So, he might want to print the page so that he would be showing it to his friends or colleagues, during occasions, when he is not hooked up to the Internet. On the other hand he might not have money to be paying Internet bills always; he might not be connected to the Internet or he might not even own a computer. He would then like to print the page so that he can be referring to the page at his convenient; this is economical. As you can see, there is need to design web pages for printing.

In this article I show you how to design web pages for printing on single sheets of paper with your home or office printer. I hope to write a series on how to design web pages for printing books, later.

You need basic knowledge in HTML and CSS to understand this article.

Note: If you cannot see the code or if you think anything is missing (broken link), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what has been typed.

Web Page Design
There is no official laid down rules for designing web page for printing. The problem boils down to using the pixel (or related unit) appropriately or using the percentage for the dimensions of your HTML elements.

Today, web site designers who think users would print their web page, normally offer two documents for the web page. One of the documents is the HTML document every one sees on the Internet. The other one might be an HTML document or document in some other language or application.

In this article I talk about web page designed for printing and not the same information in some other language or application. If you can know the relationship between the pixel and the printer characteristics, then you can use the pixel unit for the HTML element dimensions of your web page, for printing. This is not an easy thing to handle. If you use the percentage unit for the dimensions of your HTML elements, then the web page will automatically be printable. This article is about the use of the percentage unit to produce web pages for printing. Use of the percentage unit has some specialties. The following section summaries them.

Summary and Guidelines for Web Page with Percentage Units
I have just published an article titled, Web Page Design for All Resolutions. The summary and guidelines for the article is as follows:

- Design you web page at the highest computer screen resolution that you think your users have.
- Apart from images, do not give dimensions to any HTML element unless you have to.
- If you have to give dimensions to elements, give only the width dimensions to large containing elements, Tables, Table Columns and images; do not give the width dimension to anything else unless it is very necessary.
- Give your width dimensions in percentage and know the property the percentage is relative to.
- Test your design with different browsers and make any design adjustment necessary, for browser compatibility.

This summary and guidelines is what you need to produce a web page for printing using the percentage unit. If you have not understood it, then go and read the whole article concerned.

Testing your design
It is simple to test your design. Just use Print Preview (File | Print Preview) of your browser, after you have installed the printer driver for your office or home printer. With some operating systems today, you can install a printer driver without having a physical printer. The Print Preview screen page shows you how the page will be printed.

Now, the printer will break down your web page into a series of paper pages if your web page is vertically long. That is all right. The Print Preview shows these paper pages.

Well, after all these, there may still be perception of small problems. What you do is that you adjust the dimensions of the elements concerned, still in percentage, to solve the problem. From my experience the small problems come with elements that are under some kind of constraint. For example, some elements like the H1 elements that are not occupying 100% of the client area width, may wrap. You can actually allow these wrapping, since many users will not bother themselves about it; many users will not even see it as a problem since all information from the web page is printed and reasonably formatted. If you really do not like the wrapping, then you can change the H1 elements to H2 elements at the web page design or you use the SPAN element with large font sizes (relative font size preferred - see next paragraph).

Imagine that you have you a SPAN element with the Bold font-weight. You can increase the font size by using the CSS font size value, "larger" as in the following example.

Heading Heading

Something else to note is that before printing, the printer may do some simple re-adjustments of the content of the web page, but without spilling out any content. Accept this re-adjustment (simple re-formatting), because a good web site designer is not a person with perfect formatting; he is a person with acceptable formatting; you will never be able to do perfect formatting because you will never be able to know how content will fit exactly into containing element, especially with pages whose contents change over time. The readjustments is usually to re-wrap inline contents.

Question
You: With the new and very wide computer screens available in the market today, will a 100% web page width not lead to a lot of re-adjustment, rather than minimal re-adjustment with the usual computer screens?
Author: Yes, you are right, it will lead to a lot of re-adjustments. This is my interpretation. You should consider the usual smaller screens as meant to print on letter or European A4 size papers, while the new large screens are meant to print on larger size papers (like news paper size). So, if you want your home user (with his letter size printer) to print your web page with wide screens, then let the width of the web page be less than 100%. This should lead to little adjustments by the printer driver. Alternatively, if possible, design your web page in a way that when displayed on the wide screen, it will look nice, but when printed, the reader will not mind the lots of wrapping of inline elements. If you do not like these two options, then allowing your web page design at 100% width, print the web page on a paper that is larger than the letter size; after all, you have already been handling larger size papers such as newspapers; in this case, you will need a printer that can take larger size papers. Remember, all measurements of the web page design are in percentage.

Example
Now you may be eager to have an example. There is a good one. If you have installed a printer driver in your computer that is hooked up to the Internet, display and print the web page, http://www.cool-mathematics.com .

That is it, not a big deal if you understand the summary and guidelines given above, and if you watch out for the peculiarity of the new wide screens.