Part 1: Printing a Web Page—Harder Than You Think

Printing Web pages is not as easy as it should be. For some reason none of the current versions of the popular Web browsers (Internet Explorer 9, FireFox 4, Google Chrome 11, or Opera  11) are very clever when it comes to printing a Web page. Quite possibly the designers and developers of Web browsers figure that nobody really wants to print a Web page. Who would want to do that? What is the point?

But it turns out that there are often times that you might want to print a complete Web page, and the chances are that when you do this—unless you are printing a very ‘simple’ Web page—you will not be that impressed with what your printer spews out. You will typically end up with mis-aligned text, mis-placed images (pictures), probably truncated (chopped off) images, and often many more pages of output than you expected (like a three screen Web ‘page’ ends up printing 25 pages of A4).

Because of these issues some of the more serious Web sites provide either a ‘Printer friendly’ version of their pages or a nicely formatted PDF (Adobe Portable Document Format, sometimes referred to as the Print Distilled Format) version of the content. However even this approach is often not the best. Typically ‘Printer friendly’ versions of Web pages leave out any images that were part of the posting. Take the following example from the New York Times for example. The left image shows the Web page as it comes up in the Opera Browser and the right image shows what is going to print when you select the ‘Printer friendly’ option provided by the New York Times.

Notice that the pictures and graphs have been left out of the ‘Printer friendly’ version on the right. While this might be good when it comes to the advertising and other filler stuff on the right hand side of the Web page, it is not so good when it comes to the content you were trying to print with graphs and illustrations.

So, unless all you were after was the textual content, which is generally unlikely, then ‘Printer friendly’ prints of Web pages are not typically that useful.

Okay. So that failed or at best only scores about 4 out of 10. The next thing you can try is the built in printer options in the browser itself. To demonstrate how well these work I will use a ‘page’ from my site (just because I can). I have chosen the posting “Jessica Alba Popular with Users of Digg” (here). Viewed using Internet Explorer 9 the first ‘screen’ of this page comes up as follows.

[Sorry about the JPEG shuddering (as I call it) but I have compressed this image below 50 percent to keep the size down for faster page loading]

Now lets look at what the first print page of this looks like using—in order, left to right, top to bottom—Internet Explorer 9, FireFox 4, Chrome 11, and Opera 11.

With the second sample I could not screen capture the full page length because FireFox does not have a size slider to get the whole page on the screen. Also, with the Google Chrome example (the third one) I had to actually print the page and scan it because Chrome does not have an on-screen page preview option. But the key point here is that none of these look anything like the first screen of the actual Web page. The picture of Jessica Alba is no where to be seen. In fact, in all these cases, the picture of Jessica does not turn up until about print page 21 or later.

With FireFox the picture of Jessica does not turn up until page 27 and then, horror of horrors, her picture is chopped over two pages (see example at right).

So! What can you do. Well there are two options that I have come across.

The first option is to use one of the Web-based print utilities designed to solve this problem. A couple that I have come across are printfriendly (here) and Print What You Like (here). Of these I found printfriendly to be the better choice.

The example at left shows how printfriendly sets up the first four pages of the Jessica Alba posting from my site. Basically it completely reformats the main content of the site page and it also jettisons the navigation column. In doing this it ends up with 5 pages to print compared to 34 when using FireFox’s print option.

In the reformatting of the post the text is moved in relation to the images so it is possible that text that says something like “in the picture at left” might not have any picture at left—because the picture has been moved to better fit the optimised printing.

Also the font has been changed to a sans serif font whereas the posting was done in a serif font (Gorgia). This could be marginally annoying for perfectionists.

And, as you can see going from page 2 to 3, and from page 3 to 4, images are being chopped across pages.

But, even taking all this into account, printfriendly has done a much better job than any of the built-in print engines in Internet Explorer, FireFox, Chrome, or Opera; and it will also save about 29 pages of paper (in this case).

I should mention two other things about printfriendly. One is that you have to put up with advertising pop-ups, which even seem to manage to pop up when you have pop-ups disabled (how do they do that?). The other is that printfriendly can also create PDF files of Web pages.

So endith Part 1.

In Part 2 I will cover the other common way of getting better hardcopy output from Web pages.