Kilian Valkhof

Front-end & user experience developer, Jedi.

A useful print stylesheet

CSS & HTML, 1 December 2008, 3 minute read

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 it’s 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 seperate 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 arent very useful if people don’t use them.

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

Thanks for Reading!

I am Kilian Valkhof, a front-end and user experience developer from the Netherlands.
Contact me or ping me on twitter.

  1. Liked the article, made me realise that the web can still become so much more convenient.

  2. ckburnett

    “Print stylesheets arent very useful if people don’t use them.
    And I really don’t know how to change that. Do you?”

    Yes. Make a little print icon and attach a JS event to it that fires printPage().

  3. jordan

    The a::after is an interesting touch, and one I had never thought of. I’ll definitely have to see about implementing it sometime.

    Unfortunately, as is so often the case, IE users won’t get the benefit, as it doesn’t (at least in versions up to 7) support the :after pseudo-element (and certainly won’t support the CSS3 double colon notation).

    So depending on a site’s demographics and how important the print page is, I think we may still have to suffer with “special” print pages for IE users

  4. […] можно добавить кое-что полезное. Например, Kilian Valkhof предложил интересное решение, касающееся ссылок. После печати […]

  5. […] Tips for print stylesheets-useful and interesting post over at Kilian Valkhof. […]

  6. So much to do…I wanna play with print-css too. I take your article to run some tests tomorrow. Thanks.

  7. […] A Useful Print Stylesheet December1 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. read more » […]

  8. So true. I usually write my print.css, and then the print icon goes to a version of the page that is using the print stylesheet. This way, I am not writing unnecessary code to strip items, just performing a swap of stylesheet, whether that be changing the <link…> to media=”screen”, or whether it’s just a JavaScript CSS swap.

    I enjoy your attr(href) note as well. In a recent project, I had to generate a plaintext version of a newsletter stored in XML using XSLT, and what had been links had to follow a format just like that. Oh how I yearned for the a:after{content:} styles!

  9. Ckburnett, there are a couple of problems with that: It won’t work without javascript, leaving those people without printbutton (or worse, a print button that doesn’t work!) and it also doesn’t highlight the fact that they are actually printing the page in a style especially made for print, which I think is more important.

    Jordan, absolutely right, it won’t work in the IE’s. You could fix that with some fancy javascript, which would make it work for most people.

  10. […] Fuente: Kilian Valkhof […]

  11. […] A Useful Print Style sheet. (Kilian Valkhof) […]

  12. I don’t actually understand the double colon… what does it do?

  13. […] A useful print stylesheet […]

Be the first to know about new releases!

Newsletter subscribers will be the first to know about new apps I release or new articles I write, here or elsewhere.

Low-volume. I will only email you when I have something exciting to share.