Control what gets printed from the web

Jake Howlett, 2 May 2001

Category: Forms; Keywords: CSS print style

Sounds like one of those things you can't do doesn't it! Well to a certain extent you can. Previously I have talked about how to create a "Printer Friendly" page and now I'm going to describe how to do this without having to use a separate form.

How? Style-Sheets. Don't we just love them! It seems there is nothing they can not do. This article is going to show how we can tailor the look & feel of a page depending on whether its intended media is the display screen or the printed page.

Consider the following two paragraphs:

This one looks just like all the others doesn't it! Print the page out however and you will notice that the font size of this paragraph is different (Print Preview will demonstrate the effects just as well).

This one will appear totally different when you print it as it has been hidden and an alternate paragraph will display which has, in turn, been hidden from the screen.

If you can read this it is because you have printed the page out. Either that or you aren't using a browser that supports this method.

So how have I done this?

First thing I did was define some CSS rules by adding a <style> tag to this page. This tag had a special attribute called "media":

<style media="print">

This media attribute tells the browser that the CSS rules that we are about to define are only to be used when the the page ("media") is being sent to the printer.

Let's assume that we are working in CSS files/pages where you don't use <style> tags then the CSS required to achieve the above effects is:

@media print{

 .printLarger{

  font-size:20pt;

 }

 .printHidden{

  display:none;

 }

@media screen{

 .printShow{

  display:none;

 }

}

So what have we done to each of the paragraphs?

The first paragraph has the "printLarger" class applied to it. All this style does is make the text larger. However, it ONLY does this when being printed, hence the text appears normal until then.

The second paragraph has the "printHide" class applied to it. Printing this page means that that text doesn't appear. However, there is a third paragraph that has the "printShow" class applied to it. This is hiddden from the "screen" media and hence only visible to the printer. This toggling of paragraphs demonstrates how you can tailor content to the target media.

Taking the principle further

Whether or not you will find the abililty to hide text from being printed useful or not is down to you. Personally I can't see it being useful as a security feature and see it being used more to save the user having to print the things that are not relevant off-screen (such as the Search box that appears on all of Codestore's pages).

Forget hiding for now. Let's focus on tailoring content to the intended medium. One major problem when printing pages from the web is scaling. If the page has a specified width that can not be fitted on to page from the printer then it is probably better to let the page scale to the available width. For example consider Codestore. Each page is laid out inside a "main" table that is 730 pixels wide. This is too wide to fit on a piece of A4 paper. What we need is to apply a style called something like "mainTable" to it and then add the following to our CSS page:

@media print{

 .mainTable{

  width:100%;

 }

@media screen{

 .mainTable{

  width:730px;

 }

}

Notice in the above that we have defined the "mainTable" rule twice. This is perfectly legal when each is intended for a different medium. We can use this to change attributes of certain elements depending on how the user is viewing the page. The possibilities are almost endless. I shall leave it with you to go and make use of this...

Further Reading

You can find a detailed explanation of the media Rule on this page from the W3C.
Microsoft also has a page about the media Rule.

Note: You could prevent the whole page from printing if you wanted to. Just add the following CSS:

@media print{

 body{ display:none }

}

All you would get then is lot of blank pages and some confused users.

Earlier I mentioned that this is not really a security feature. The reason for this is that there is not way to stop the educated user from copying the text, viewing the source or doing a screengrab. From either of these they can easily print the page.