Simple way to make your website print-friendly using CSS

Published 30. Oct 2010, 13:55

You might have been thinking: it's not a big deal, who in their right mind prints websites anyway? Then suddenly at some random webproject you're saying to yourself "hey, whadda' ya know. It would be pretty sweet to be able to print the content on this site..". Well, you're in luck. I got a simple, elegant and lightweight solution for you.

First of all you need a css file that transforms the original css into a print-friendly version. Now before you put anything in there, you should know what to put in there. A print-friendly document is very much relative I suppose, but there's some common practices - even out there in the World Wild Web.

A print-friendly css file should:

  • Remove navigation.
  • Set background- and textcolors to black.
  • Remove non-essential images.
  • Underline anchors.
  • Constrict document width to 650 pixels (otherwise the document will be shrunk and alot of your formatting will most likely be in vain).
  • Increase the font size if it's too small.
  • Optionally you can change font type to one using serifs like the well-known "Times New Roman". Sans-serif fonts can be nice looking on the web but it's easier to read serif text. This can be more important when reading long texts.

Ultimately, it's up to you how you want to format the printed document. Perhaps you want to keep the colors if it looks absolutely horrendous without them, I for one won't judge you. The user can easily choose to print in grayscale anyway.

Anyway, let's move on to a fully formatted css file which we will use to make a print-friendly document. We'll name it print.css and its content is shown below.

Notice that we import the original css file in the beginning of the file, this is an important detail. We need to include the original css file if we want to retain any trace of our look and feel in the printed document. Also because our original css file, here called original.css, is already requested by the client it will not be requested again. This means that the print.css file will only consist of a few hundred bytes. Not bad, uh?

You might be interested in knowing that if the you're using the @import keyword to import a fresh stylesheet, then it cannot be downloaded in parallel with the calling stylesheet. It must be downloaded in sequence. This can cause delays in loading the webpage.

Lastly note that I've put the keyword !important at some css properties. This is to tell the css parser to prioritize that particular value if there's a collision with other selectors. 

/*** CONTENT OF 'print.css' ***/

/* Import original css file */
@import url('original.css');

/* Constrict document to 650 pixels and remove border */
#wrapper
{
	border: 0;
	width: 650px !important;
}

/* Remove navigation, header, footer and unecessary images and elements */
.noprint
{
	display: none;
}

/* White backgrounds, black text and black borders */
*
{
	border-color: #000 !important;
	background-color: #FFF !important;
	color: #000 !important;
}

/* Underline all anchors */
a
{
	text-decoration: underline !important;
}

Now we're almost done. Firstly we must assign the class 'noprint' to the containers we want to hide. This is a nobrainer really, but let's show a snippet for completion. Like this: 

<div id="navigation" class="noprint">
...
</div>

Finally we must import the stylesheets. This is done by putting link elements in the head section of your HTML. It's important to specify the correct media attribute for each stylesheet. Our print.css stylesheet must have the media attribute 'print' while our original css file is for the media 'screen'. Full example follows below. Note that the 'rel' and 'type' attribute should always be included when importing css files. 

...

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

...

Before we wrap this up, make sure you test your new print-friendly page with the "File -> Preview Page" option located in the browser menu. Every webpage is different so one solution may not be sufficient for all the others.

At last you're all set to make the best, darn, print-friendly website there is! Or something like that.

Back to the top