FWebDe

Creating a Print Stylesheet

August 6, 2009, in CSS,Web Design, by Eric Bannatyne.

It's been over a month since I launched FWebDe.com, and I've decided create a print stylesheet. This will be a very simple print stylesheet, designed mostly to remove unnecessary page elements and to be helpful to people viewing it on paper.

Disabling Unnecessary Sections

First of all, we need hide certain selectors that won't need to be printed. We will set them all to display: none. The first sections to disable are the navigation bar and the sidebar. We will also disable the search box and the footer. Other things that could be removed are the retweet button and the bookmark buttons. I don't think that peole would want to print the comments, so we will be disabling those to.

Here is my code so far. Your selectors will be different for your website.

#topbar, #sidebar, #searchbox, #footer, .retweet, .bookmark-h2, .bookmark, .comments-template {
    display: none;
}

You can check the print preview in your browser to make sure everything works.

You might notice that I didn't hide the rest of my header. This is because I placed a hidden h1 element, set to width: 0; height: 0; overflow: hidden;. This is useful for text-based browsers, such as Links. I always use Links to test my websites to make sure it looks fine.

What to Do With Links

Of course, people can't click links on paper, right? We're going to help them out by including a URL that they can check if they need to. We will do that using the :after pseudoclass.

First, we will make all links black, and not the default link colour. I also set text-decoration to none because it didn't look very good with underlined text. We will apply these styles to a:link and a:visited.

content: " (" attr(href) ") ";

This adds a space and an opening parenthesis, and then it displays the value of the href attribute. It's ended with a closing parenthesis and a space.

We will also set the font-size to 90%, so that it doesn't interfere too much with the rest of the content.

Finally, we end up with this code.

1
2
3
4
5
6
7
8
9
10
11
12
13

#topbar, #sidebar, #searchbox, #footer, .retweet, .bookmark-h2, .bookmark, .comments-template {
    display: none;
}
 
a:link, a:visited {
    color: #000;
    text-decoration: none;
}
 
a:link:after, a:visited:after {
    content: " (" attr(href) ") ";
    font-size: 90%;
}

Remember to use the CSS Drive CSS Compressor to reduce the file size of your print stylesheet.

Applying this Stylesheet

Now that we've created the stylesheet, all we need to do is apply it to the page. We will add it to the page in the normal way, but with a small modification.

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Since this is for a WordPress theme, I will use this instead.

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/print.css" type="text/css" media="print" />

This uses the styles from the print.css file in the theme's directory.

After adding this, remember to set your main stylesheet to media="screen" so that it will be only shown on the screen and not printed.