Designing Web Pages for Printing

printing website
tookapic / Pixabay / CC0 1.0
Printing on a Single Sheet of Paper

When somebody reads a web page that he finds interesting, he might be coming back to the web page; he might also consider it as a reference. So, he may print the page, 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 always have money to pay for Internet bills; 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 convenience. As you can see, there is a need to design web pages for printing.

In this article, I will show you how to create web pages for printing on single sheet 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 of HTML and CSS to understand this article.

Web Page Design

There is no official laid down rules for creating a 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, website designers who think users would print their web page, normally offer two documents for the site. One of the documents is the HTML document everyone sees on the Internet. The other one might be an HTML document or document in some other language or application.

In this article, I will talk about web page designed for printing and not the same information in some other language or application. If you 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 utilization of the percentage unit to produce web pages for printing. Use of the percentage unit has some specialties. The following section summarizes them.

Guideline for Web Page with Percentage Units
  • Design your 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 guideline 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 my previous article Web Page Design for All Resolutions.

Testing your design

Testing your design is simple. 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, there may still be some small problems. What you do is adjust the dimensions of the elements concerned, still in percentage, to solve the problem.

From my experience, the little problems come with elements that are under some constraint. For example, some elements like the H1 elements that are not occupying 100% of the client area width, may wrap. You can 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 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).

Imagine that you have a SPAN element with the Bold font-weight. You can increase the font size by using the CSS font size value, “larger”.

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 website designer is not a person with perfect formatting; he is a person with acceptable formatting.

You will never be able to do a perfect format because you will never be able to know how content will fit exactly into a containing element, especially with pages whose contents change over time. The readjustments are usually to re-wrap inline contents.


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?

Answer: Yes, you are right, it will result in 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 intended to print on larger size papers (like newspaper 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 too much wrapping of inline elements.

If you do not like these two options, then allow 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.

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

Norman Anthony Balberan

Anything out of the ordinary (?) Utopian dream, crashed and merged with unstable consequences causing mayhem...

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.