Kilian Valkhof

A useful print stylesheet

Print stylesheets are pretty well supported. In this article I’ll discuss what I think makes a good print stylesheet, and we’ll take a look at how we can improve public familiarity with them.

What makes a good print stylesheet?

A good print stylesheet, first and foremost, hides all the unnecessary elements, such as navigation, search, sidebars and other elements that aren’t directly important for the page being printed. It removes as much of the colours as possible, so that you’re not wasting anyone’s colour ink, and make sure your text is the width of the page (width:auto) so that you’re not wasting anyone’s paper.

There’s one smart trick when making a print-stylesheet. In print, people can’t click on your links, but they might want to visit them anyway. By using this bit of CSS, you place the actual link in parenthesis behind the linked word:

a::after {
  content: " (" attr(href) ") ";
  font-size: 90%;
}

Where the font-size makes it just slightly smaller than the normal text to distinguish it a bit more.

Two very handy CSS properties are page-break-before and page-break-after. With these elements you can control where your site should “break” over into the second page. On this site, I use this CSS:

div.comments {page-break-before:always;}
h2, h3 {page-break-after:avoid;}

Comments are always placed on the second page, so that the article is always on its own as well. One thing I find pretty ugly is when a page ends with a header, and the following paragraph is on the next page. The second bit of code prevents that.

There are two ways you can add a print stylesheet. One is with a separate stylesheet, and linking to it with <link rel="stylesheet" type="text/css" href="print.css" media="print" />. The other one, which I use on my own site, is an @media print code block at the bottom of my CSS file:

@media print {
  //my print-only css
}

Which I think is better, because it saves a http request while still being fairly clear.

Of course, most of this information isn’t new. There is a great A list apart article from 2002(!) that details much of what I’ve written above.

Updated: Additional cool techniques by Jan Paul Posma

The trick we used before to display links can be used in a number of different ways. Suppose, perhaps, that you are using relative links on your domain. about ( /about ) wouldn’t be very useful. Luckily you can add arbitrary text to your ::after content, such as this:

a[href^="/"]:after {
    content: " (http://kilianvalkhof.com" attr(href) ")";
    font-size: 90%;
}

And the same idea can be applied to acronyms and abbreviations!

abbr[title]:after,
acronym[title]:after {
    content: " (" attr(title) ")";
    font-size: 90%;
}

The [title] part of the selector is there to make sure only abbreviations with a title element get explained. This prevents empty parentheses from popping up.

In the eye of the public

So, we’ve known about this since 2002 at least, why do clients still ask for a special print page and a little printer icon for people to click on?

The reason for that is of course pretty clear: the browsers doesn’t tell people that a page is especially adopted for print as well as screen. And so in turn people have no idea of the possibilities.

Print stylesheets aren’t very useful if people don’t use them.

And I really don’t know how to change that. Do you?