Printer Friendly Pages

Category: CSS
Reviewed by: swnesbitt
Reviewed on: May 26 2006
» Discuss this topic ( Posts)

Building the Stylesheet

Let's assume that the Web pages you want to style for print contain elements that you don't want to appear on a printed page. What kinds of elements? Navigation menus, ads, graphical headings, and the like. You'll quickly learn to love the display: none property. display: none tells a CSS-capable browser not to render any element that it's applied to. So, if your Web site is designed with CSS and you have an area for your navigation menu defined as div#navBar, then in your print stylesheet or print section of your global stylesheet, you'd add the following definition:

[code] div#navbar {display: none} [/code]

Note: For more information on designing Web sites with CSS, see the DEVPEN article "Two and Three Column Layouts with CSS".

Apply display: none to every section of the page and/or every element that you don't want printed.

But what do you do if your pages aren't designed with CSS? Say, for example, you use tables for the layout of your Web pages? Here's a little trick that you can use. Tag each part of the table that you don't want printed with a class called .content, for example:

[code] <td class="content">
... your content here ...
</td> [/code]

Then, in your print stylesheet or print section of your global stylesheet add the following CSS property:

[code] .content {display: none} [/code]

The parts of the table that are tagged with .content the won't appear when someone prints a page.

Note: Although I used .content to name that class, you can call it anything that's meaningful to you.

Your Web pages will most likely be made up of a number of common HTML elements. In this article, I'll discuss how to style the following elements for print:

<body>
<h1>, <h2>, and <h3>

Note: You're not limited to styling the above HTML elements. Feel free to experiment with styling lists, tables, images, font elements (like <code> and <em>), etc. for print.

First, let's set up the style for the <body> tag:

[code] body {margin-left: 30px;
font-family: sans-serif;
font-size: medium;
padding: 6px;} [/code]

The margin-left: 30px property indents the all elements of the Web page 30 pixels from the left margin. This adds a nice effect to print documents, especially when combined with the styling that we're going to add to the headings.

The font-family: sans-serif property sets all body text to a sans-serif font. Many old-school typesetters insist that in printed documents, headings be in a sans-serif font (like Helvetica) and body text be in a serif font (like Times). I don't believe that this is a hard and fast rule. Experiment with different fonts. But your font choices should be made on the basis of readability, not how cool you might think the font is. And remember that the font you specify for the <body> will affect all elements contained in the body of your Web pages: paragraphs, list items, table cells, etc.

The font-size: medium property sets the font size to about 12 points, the size of the type in a newspaper or magazine. That's quite legible, but if you think the font is too large you can change the size to small.

I included the padding: 6px property to add a bit of space around the margins. You can add this style to your screen stylesheet, too.

Moving on to the heading styles, let's start with <h1>:

[code] h1 {margin-left: -25px;
font-family: sans-serif} [/code]

Again, the font used is sans-serif -- I think that heading in a serif font looks a bit too staid whether in print or on the Web.

Notice, though, that I set the margin-left property to -25 pixels. This creates with effect that I alluded to earlier. All headings that are tagged as <h1> will be 25 pixels to the left of the body text. This effect is called an outdent, and looks like this:

Outdent example

In many structured documents, not all headings are outdented to the same degree. A first level heading has the largest outdent, and all other headings move to the right. Using that as a guideline, let's style <h2> like this:

[code] h2 {margin-left: -15px;
font-family: sans-serif} [/code]

The outdent for <h2> is five pixels smaller than for <h1>. The font is, you guessed it, sans-serif.

Now, for <h3> and <h4>. Some people like to have <h3> outdented and <h4> in line with the body text. Not me. I like them both in line with body text. So, here's how to create that effect:

[code] h3, h4 {font-family: sans-serif} [/code]

Notice that I didn't include a margin-left property with this style definition. It's not needed. Both the <h3> and <h4> will automatically be in line with the body text.

Adding Page Breaks

Web browsers don't add page breaks very well. If you've ever printed a Web page, you've probably seen (for example) a heading on the bottom of a page, and the text that goes with it on the next page. You can avoid this by using the following CSS property:

[code] page-break-before: always [/code]

As you can probably guess from the name of the property, it adds a page break above the element to which it is applied. You'll want to use page-break-before: always sparingly. Most people I know who use the page-break-before: always property usually apply it to the <h2> element.

When you're testing your print-only pages, you may find that you need to force page breaks at certain point in a document. In the word processing world, these are called hard page breaks. To add a hard page break to any HTML element, just define this class in your stylesheet:

[code] .breakPage {page-break-before: always} [/code]

Then, apply it a tag like this:

[code] <p class="breakPage"> ... your content here ... > [/code]

« Previous page Next page »