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:
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:
[ 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.
By default, all of the CSS you declare is designed to primarily apply to a screen:
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:
The solution? Use two style sheets:
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.
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:
Things are a little bit different when you involve media queries.
The media query you would use for a print-only situation would look as follows:
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.
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.
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:
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.
Links are like the glue that connects the internet together:
[ 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:
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:
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:
With this, you can print a document and not see a flood of URLs decorating every link you may have made.
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.
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!