There are times when you want the printed output from a web page to look different that the way the page is displayed on a computer screen. This is particularly useful with blogs and web sites that provide information that users may want to print and file away for later use or for late night reading. I am amazed at the number of major web sites whose pages cannot be printed properly because the content either doesn’t fit on the page, or is cluttered with ads and menus that have no useful purpose on a printed page. CSS can come to the rescue with an external style sheet designed to format printed output.
This is an extension to our article about Using External CSS Style Sheets. If you are not familiar with external style sheets, please read that article first. You must use external style sheets to use this technique effectively and efficiently. External stylesheets are beneficial because one of two stylesheets can define the output for all the pages in a web site. When you want to make a format change to a font or other page element, you only need to make the change in one file.
This technique is easier to use with a pure CSS web page design, but it will work with tables or any elements where you have declared a CSS id or a class that can be referenced in a style sheet. That is the key to making this work. You must be able to reference any element that you wish to reformat or prevent from displaying on printed output.
Using an external print stylesheet is particularly useful when you want the printed output to look more professional, such as with a report format. You can easily hide page elements such as advertising banners, buttons, menus, links or just about anything you see on a web page. With a pure CSS design, you can rearrange the elements to display in a different format. Colors, fonts and just about anything that you can format with CSS can be reformatted to look different in printed output.
Most web sites define one or more external style sheets and reference them in the head section of a web page document like this:
<link rel="stylesheet" href="/css/style.css" type="text/css" />
This is a generic style sheet declaration that format the output for both screen display and for printed output. But CSS does allow you to use separate style sheet for screen and printer output. You just need to declare separate external stylesheets like this:
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print"/>
Note the “media” attribute that has been added to each call to the external stylesheets. That tells your browser to use a different set of style sheet rules for display versus print.
I typically get the screen display to format the way that I want it to look and then copy the display stylesheet to a separate external stylesheet called print.css. From that point you can begin to reformat your printed output. Print stylesheets can be very short and simple, because most of the formatting rules can be stripped out when multiple page elements are disabled to prevent them from printing.
Here are some important print stylesheet tips
First, pixels describe the dots that make up a screen display. Points describe printed output. Browsers recognize both, and each method will display the size of an element differently. Points should never be used for screen display elements. You can use pixels universally, but it is technically more correct to use points for printed output.
I always start out by defining the width of a printed page in the print stylesheet.
html
{
width: 100%;
}
body
{
width: 7in;
}
This helps assure that the printed output will fit within the borders of the page. Nothing is more frustrating than printed output that run off the side of a page where it cannot be read. Why did I use inches for the page width? Because a point is 1/72 of an inch, but it is just easier to declare this as 7in, rather than 504pt. It is just easier to recognize and change.
If you want to prevent page element such as search boxes, buttons, ads, menus, etc., from displaying, just make sure that they can be referenced by a CSS id or class and use the CSS display property set to “none”. I also add a class called .nopr that I assign to page elements that I do not want to print, but I am not formatting in any way in the screen stylesheet. The .nopr class is not even referenced int he screen output stylesheet.
.nopr, div#sidebar *, div#footer a, #topNav, .sociable, #searchBox
{
display: none;
}
If you want to prevent all elements within a table column or CSS division from displaying, simply add an asterisk, such as you see with the reference to “div#sidebar *” that you see above. Normally you won’t need to do this, but sometimes you will depending upon the mix of elements within the table or div container. It is one way of making sure that nothing in a div or column is printed.
You do not need to print each page to check the results. The Print Preview features in a browser will accurately display the output that you would see on your printer.
Where you could run into formatting problems
If you declare table columns or CSS div widths using inline attributes on a web page, those widths may still display even if you have the internal elements turned off using the display:none property. Try to keep any on-page inline CSS code or table column attributes (such as width=”100″) to a minimum. It is much more efficient to declare these formatting issues in an external stylesheet. If you run into problems with a table column that is still displaying in printed output, try the asterisk method show above. For example, if you have a table column that displays a left-side menu and the column is referenced with id=”leftMenu”, you should be able to prevent the entire column from displaying if you use the following rule in the print stylesheet.
td#leftMenu *
{
display: none;
}
This should get you started with external print stylesheets. Once you learn how to use this technique, you will probably like it so much that you will use it with all of your web sites.