Styling Your Page For Print
In addition to simply giving your user the option for printing the current page when you add a print button on your web page, you should also seriously consider styling your page for print. Those of you with an understanding of CSS (Cascading Style Sheets) may already realize the importance of styling for print as well as how easily it can be done. Most modern web pages use CSS to style the elements on the page, but some website owners do not realize you can assign multiple different styles for the context of your page. By assigning two style sheets (each with the media attribute declared as “screen” and “print” respectively), you can easily tell the computer how to render your page for print.
What is the use of taking this extra step, you may ask? Consider the scope of this article. If you are to add an anchor or button on your page that offers the visitor a way to print your page from within the content, do you want that button to actually show up on the printout? My preference is a resounding NO! To circumvent this, you can add a print style sheet that hides any and all unwanted page attributes from the printed content (headers, footers, etc).
Ideally, as mentioned above, we want to attach the execution of the print method to the button in as unobtrusive a way as possible. In this example, you can see that I am finding the “print-it” button upon page load and attaching the click listener to it. There are actually a couple different things to note in this example.
First, notice that the content text changes between the screen render and the print preview. This exemplifies the recommendation previously made to attach a print style sheet. Generally speaking, it’s not a good idea to completely change the content of a page, but for this example, it serves the purpose well.
While adding a print button on a web page can seem very useful on the surface, I would caution against its over-use. There are definitely times where it is very applicable, but in some cases, by bypassing the normal browser interaction, it is possible to confuse a user. Another thing to consider is actually writing a print version of the page or even a print script that removes unwanted markup from the final version. This can be more flexible than simply attaching a print style sheet and gives you a permanent reference to which you can link from elsewhere on your site. Suffice to say that, as with so many other tools, use it wisely!