The KIRUPA orange logo! A stylized orange made to look like a glass of orange juice! Tutorials Books Videos Forums

Change the theme! Search!
Rambo ftw!

Customize Theme


Color

Background


Done

Creating Printer Friendly Pages

by kirupa   |   10 January 2012

  Have questions? Discuss this HTML5 tutorial with others on the forums.

One of the things that always surprises me is how often people print content. For someone like me who doesn't even remember where the printer is in his house, it is difficult to comprehend:

who are all of these people who print

Despite me (and possibly you!) not having printed a web page in forever, we are not representative of normal people. For example, based on the AddThis statistics for this site, printing is the second most popular activity for people to partake in besides sharing content on Facebook:

print activity statistics

[ your results may vary ]

If you have never prioritized making your pages printer friendly, don't worry. The good news is that it is easy use some CSS to make your print-loving audience like your content more. All of this is possible without creating duplicate / print-specific content.

In this tutorial, let's look at four tips on how easy it is to make a printer friendly page using only some minor CSS changes. Let's get started.

1. Specifying a Printer-Specific Media Query

By default, all of the CSS you declare is designed to primarily apply to a screen:

a computer monitor

What is optimized for a screen will not work well when printed out. There are too many considerations that you need to take into account when targeting something smaller and static like paper:

you are now going to paper

The solution? Use two style sheets:

  1. One style sheet for normal, screen use.
     
  2. One style sheet for printing only

This is possible by using what are known as media queries. By using media queries, you can tell your browser which style sheet to load depending on the context.

Normal Style Sheet

For the normal case, there is nothing special about declaring a style sheet. You've probably been declaring that kind of a style sheet for more than a decade:

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

Things are a little bit different when you involve media queries.

Print Style Sheet

The media query you would use for a print-only situation would look as follows:

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

The one thing that sets this link tag apart is the inclusion of media="print". The print media type specifies that the style sheet you link to via this link tag only becomes active when you are printing your page.

A Note on the Cascade

The position of this media query can be anywhere in your document's markup. Stylesheets that aren't conditional on being in the print state will not participate in the CSS cascade when you are about the print. The only exception is when you have multiple stylesheets with the print media type. In that case, a cascade among only those stylesheets will take place with normal precedence rules kicking in.

2. Hide Unnecessary Content

A web page will often contain content that doesn't make sense when printed. Examples of such content include navigation links, banner ads, background images, and more. The easiest way to hide the extraneous regions is to target them using a selector and specifying a style declaration of display: none.

For example, here is what my print.css looks like:

#rightContents, #leftNav, #bottomBanner, #topAdFinal, #footer, #bottomFooterLinks {
display:none;
}
#mainContent {
min-width: 99%;
}
 
#headerMain {
max-width:100%;
}

Notice that, as part of hiding the unnecessary content, I do some other specific fix-ups such as ensuring that the main content fills up the available space on the page. That is why you see min-width and max-width specified with a percentage size as the value.

In your example, you may have other fix-ups to help make your page suitable for printing such as increasing the font size of small text, adjusting the background / foreground colors, etc. Remember, all of this CSS will live in your print-specific style sheet. As long as your media query is setup correctly, your visitors will never see these changes until they try to print the content.

3. Display the Full URL for Links

Links are like the glue that connects the internet together:

A funny example of links

[ the fascinated clicking happened on links! (taken from xkcd) ]

When you print a web page and are staring at it, links are unnecessary. You cannot click on your paper with your finger and expect to be navigated somewhere else - at least not yet. Despite that shortcoming, you may still find it useful to know where the links point to.

To help address this, you can use some post-IE7 CSS trickery to display the full URL of a link directly after it:

a[href]:after {
content: " (" attr(href) ") ";
}

What this snippet of CSS does is take your links and place their full path directly after them in parentheses. This is done by setting the content property to your link's href value. The after pseudo-selector specifies that this href value comes after the link.

For example, in your browser you may just see the following for the Home Page link:

Home Page

When you print your document out, you'll see the full path next to the link instead:

Home Page (http://www.kirupa.com)

Remember, if you have a lot of links in your content, seeing their full URLs can get a bit overwhelming. In these cases, I encourage you to mark important links with a class. Once you have done that, you can tweak your selector to focus on only the links that you marked as important.

For example, on this site, all of the links that are important have a blueEmphasis class assigned to them. My CSS for displaying the full URL of only those links when printed is:

a[href].blueEmphasis:after {
content: " (" attr(href) ") ";
}

With this, you can print a document and not see a flood of URLs decorating every link you may have made.

Conclusion

So, there you have it - three quick and easy steps to make your pages more printer friendly. The last thing is to make sure your pages look nice when printed. The best way to see what they look like is to actually print them and inspect the outcome.

Note on Print to File Solutions

Because I didn't feel like finding my printer, I tried a variety of "print to file" options such as printing to an image, PDF, or XPS file. All of them don't fare quite as well as the real tree-killing deal because they offer lackluster CSS support and have some quirks about them when they convert your page into a file.

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

Kirupa's signature!

The KIRUPA Newsletter

Thought provoking content that lives at the intersection of design 🎨, development 🤖, and business 💰 - delivered weekly to over a bazillion subscribers!

SUBSCRIBE NOW

Serving you freshly baked content since 1998!
Killer icons by Dark Project Studios

Twitter Youtube Facebook Pinterest Instagram Github