Adding a Print Style Sheet to your Site
It’s an easy thing to forget, but you can serve a style sheet to your site specifically for print. It’s common to serve up a style sheet to all media like this:
<link rel="stylesheet" media="all" href="styles.css">
Using media=“all”
means that the styles in style.css
will be applied to all media—from your computer screen to your printer.
The problem with this is that printers don’t obey some of the styles that you typically apply to elements, such as background colors. (Most browsers will not print them by default.) Background colors are not very practical when printing a document (not least because they use a lot of ink).
Different Needs
Print has its own needs as well. Consider the links that appear on your web pages. Text with a special color and perhaps an underline is fine on a screen, because you can click it to navigate to a new page etc. But in print, these colors and underlines are of little use. So when creating print-specific styles, you can instead specify that the link’s URL be made apparent—which enables readers to go look up the link later if desired.
There are various ways to serve up print styles, but the most practical is to link to a separate style sheet. So, let’s modify the link to the first style sheet and add another:
<link rel="stylesheet" media="screen,projection,tv" href="styles.css">
<link rel="stylesheet" media="print" href="print.css">
Now the original style sheet is just served up to devices for which its styles are really appropriate—namely, computer screens (including smartphones), projectors and televisions. And when you go to print a web page, the printer will use the styles in the print.css
style sheet instead.
If you serve up no print styles at all, you will get a pretty plain printout, with just the basic, default browser styles—which are pretty simple. This is fine, really, but you can certainly spruce things up a bit without going to town. Let’s first fix up those links.
Adding URLs to Printed Links
Firstly, I like to remove any color, underlines etc. from the links, like so:
a, a:visited {
color: #000;
text-decoration: none;
}
Next, I like to include the URL after the link, like so:
a[href^="http"]:after {
content: " (" attr(href) ")";
word-wrap: break-word;
}
Now, there’s probably no real point in showing internal site links (if you disagree, that’s fine). So the rule above just targets links with a full URL (which would normally be to an external resource). It does so by checking that the URL includes http
at the start. If it does, a link like this …
… will appear in print like this:
Wikipedia (http://en.wikipedia.org/wiki/Main_Page)
That would look silly on screen, but is very handy for those reading printed material.
I’ve also included word-wrap: word-break
, which will cause a long URL to break to the next line rather than extend off the printed page.
However, it sometimes happens that all links have a full URL (beginning with http://
etc.)—such as in a CMS, where link URLs might be generated automatically. In such cases, if it’s possible to add a rel
attribute to your links (such as rel=“external”
), then you could target the external links with that:
a[rel="external"]:after {
content: " (" attr(href) ")";
word-wrap: break-word;
}
Hiding Things That Are Unnecessary
There are many elements of a web page that are irrelevant in print and are best just hidden from the printer. These might include—
- menus
- breadcrumb links
- sidebars
- advertisements
- forms
- pagination links
- social buttons
… and so on. All of this just clutters the printed page and is useless to print readers. So they are best all hidden in one simple declaration:
element1, element2, .class1, .class2 {
display: none;
}
That will clean up your printouts greatly!
Problem Solving
Sometimes, you have to do a bit of problem solving. For example, on some pages I have embedded YouTube videos. When going to print, you’ll find that a big blank space appears where the video should be. That looks pretty awful, so what I’ve done on this site is, firstly, to add some extra code to my HTML:
<p class="vid">
<iframe src="http://www.youtube.com/embed/p4v4bBXxwmA?rel=0"></iframe>
<span class="vidlink">Video link: http://www.youtube.com/embed/p4v4bBXxwmA?rel=0</span>
</p>
That span includes the link to the video on YouTube. In the screen.css
file, that span is set to display: none;
, while in the print.css
file, I have this:
iframe {display: none;}
.vidlink {display: block;}
Now, print readers don’t get an ugly while gap, but instead a nice reference link in case they want to go and look at the video:
Video link: http://www.youtube.com/embed/p4v4bBXxwmA?rel=0
Other Print Options
Some other options you might consider for a print style sheet include:
Setting font sizes in points
Points (pt) as a measurement doesn’t work well on the web, but it’s familiar in a print environment. Just as you can set your font size to—say—12pt
in a word processor, you can set your body copy to 12pt in your style sheet:
body {font-size: 12pt;}
Setting Page Breaks
There are various options here, but as a simple example, you could decide that every h2
should start at the top of a new page:
h2 {page-break-before: always;}
You can similarly use page-break-after: always
.
There are various other values apart from always
, such as avoid
, which obviously instructs the browser to avoid breaking at a certain point. This is particularly handy when you don’t want a page preak inside an element, such as a paragraph:
p {page-break-inside: avoid;}
How Far To Go?
I tend to go through as many pages of the site as possible and going to File > Print and studying the print preview. (There’s no need to waste ink. If you need something more substantial to look at, you could print the page to PDF.)
Through this process, you’ll find extra elements that either need to be given some styling or hidden altogether. On this site, I’ve mainly focused on the article pages (like this one), because content like this is far more likely to be printed than, say, an About page.
I like to keep things simple in print, only adding in style where it really helps to make the content more readable. On this site, for example, I’ve added in some horizontal lines between each post comment, as it helps to have them separated visually.