No-Menu Page Printing

Site users can print your web page. (Unless you prevent it. One way is described at the How To Prevent Web Page Printing page.)

So, if you don't actively prevent your web page from being printed, users can print it.

I recently had a need to allow printing of entire pages — to actually suggest it can be done. But I didn't want the menu printed. How to prevent a page menu from printing is the subject of this article.

The web page willbontrager.com/recipes/ has a live example. There's a menu at the top of the page and shorter one at the bottom of the page.

In essence, you put a certain CSS rule into your stylesheet. Then you specify the class name for the elements you would rather not print. When an element is not printable, it also won't be included in any PDF made of the web page.

Step-by-step:

1. Put this CSS rule into your site's stylesheet. This needs to be done only once for the entire website.

   @media print  { .noprint  { display: none; } }
   

2. Use the class="noprint" attribute for every element that should not print when sent to their printer or when a PDF is made of your web page. Example:

   <div id="my-menu" class="noprint"><a href="/">Home</a> <a href="/books">Books</a></div>
   

If you only want to do a test web page, there's no need to put the CSS rule into your sitewide CSS file. Put this on your test page and you're good to go:

<style type="text/css">
@media print  { .noprint  { display: none; } }
</style>

That's it. Put the CSS rule into your stylesheet. Then use class="noprint" for everything that should not print.

(This content first appeared in Possibilities newsletter.)

Will Bontrager