Print-specific Style Settings for Web Pages

Published:

Creating a CSS block that only applies to printing

By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certain conditions, such as on the printed page.  To do this, you need to add a section to your CSS, called a media rule.
@media print {
                          /* Anything within this block will only apply when the page is printed
                      }

Open in new window

Note: the official description of Media Queries is available on the W3 site at http://www.w3.org/TR/css3-mediaqueries/, and defines many other variations.  This article focuses on printed pages, so we created a rule for @media print.  It could just as easily be applied to color or B/W displays, touch screens, screens of a certain dimension, or a multitude of other conditions.

Hiding Elements from the Printed Page

The question comes up all the time: Can I prevent people from printing my web page or an image on the page?  The short answer is unfortunately "No".  You can make it difficult for them, but a determined visitor will still find ways.  So far nothing I'm aware of can prevent them altogether.  Basically, if you put it on the page, they can see it and find a way to print it - even resorting to the brute force approach of a screenshot if they have to.

Another way of looking at the same problem is shielding elements of your page that don't need to be printed.  For instance, if somebody is reading an article on your site and wants to print it, they probably don't need the navigation, advertisements or a print button on the printed page.  They want to read the article, not look at the framework around it.  So in this case, hiding some pieces of the page from printing is beneficial to the user, rather than restrictive.

If you are simply trying to hide certain elements from the printed page, such as a navigation menu, or the print button itself, you can use CSS to tell the browser not to print those sections.  That way, anyone who uses normal methods of printing the page won't see what you don't want them to.

Now, depending on your preference and needs, there are several ways you can write your CSS within that rule. For example, if you want to add a class to certain elements and hide those from the printed page, you could write it like this:
@media print {
                          /* Anything within this block will only apply when the page is printed
                          .noPrint {
                             display: none;
                          }
                      }

Open in new window

Now anything in your HTML that you don't want printed you add the "noPrint" class. That can be applied to almost any element on your page. It will appear as normal in the browser window, but will be removed from the printed page.
<div class="noPrint">
                      This will not print</div>
                      <p>
                      <span class="noPrint">Neither will this</span> But this will!</p>

Open in new window

When the browser renders that for printing, it strips out anything with class="noPrint" and returns this:
<p> But this will!</p>

Open in new window

On a related topic, sometimes people will ask how to block users from downloading images from their page. The same answer applies here as well... you can put up roadblocks, but somebody determined enough can still get a copy of the image. There are many variations on how to do this, but most involve intercepting what is called the context menu (the menu displayed when you right-click) and returning false. This technique is easily defeated, doesn't work in all browsers anyway, and in most cases will only serve to annoy your users, more than prevent them from doing what they wanted in the first place. Rather than show an example of how to do this, I suggest that if you need to prevent somebody from right-clicking on an image for a valid reason, you would be better spending your time re-thinking why the image is on the page in the first place if you need to keep it protected.

Other uses for print-specific styles

The usefulness of print-specific styles doesn't stop with simply hiding certain elements from the printed page.  You can also apply any other styles you'd like, which could make it read better on paper - for instance you can change the fonts used, set the width of a containing DIV to fit into an 8-inch printed page, or even override text colors to print as black or remove background images and colors so they don't distract from the printout.  Your printed page can be drastically different from the on-screen presentation.  This is a handy way to print news articles, recipes, blog posts, etc, without needing to create a new page displaying it in a printer-friendly view.  It would be one page on screen, and through your media rule it knows how to format itself for print.

Other types of media rules

The W3 definition of Media Queries is at http://www.w3.org/TR/css3-mediaqueries/ for a full reference. In it, they discuss different combinations of rules that can be applied.  This potential is at the heart of a layout concept called Responsive Design.  Entire books can be (and most likely have been) written about the topic, but I found a very interesting article which sums up how I like to approach it - Responsive Design: Why You're Doing it Wrong (by Joshua Johnson)

In a nutshell, Responsive Design is about making a site layout that adjusts itself to different screen dimensions, display types (computer/touch/print/etc) and orientations primarily through CSS with slight help from javascript as needed.  The idea is that the web is everywhere these days, on all different devices, so your sites should look as good as possible on any device that displays it without the need for parallel versions of the site for different devices.  (In other words, no more links telling you to "Click here for the mobile version")  Most people tend to make adjustments to their layout based on what device they think the viewer is using.  (If it's an iPad, use this layout, if it's an iPhone 4 use this layout, etc)  Joshua Johnson's article discusses a more scaleable approach that sets breakpoints based on the content rather than on the device.

This article (in a simpler form) was first written for my blog (jUntangled) which aims to give posts about HTML, CSS, jQuery and related topics.  The goal is to help beginner and intermediate developers with some of the tricker concepts of web development.
1
1,925 Views

Comments (0)

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.