Added a print CSS style sheet

Today, I checked an item off on my todo list that had been on there way too long: I created a print style sheet for this site. Every time I write an article that is longer than 5 paragraphs, I get emails from readers asking for a better print style sheet. Until just a few minutes ago, printing would include the header, the sidebar and the comments, not exactly friendly.

Next to that links would be in a different color, depleting your color cartridges and not giving you any info whatsoever. When you’ve printed an article, you usually have to go back to the online version to be able to open the links. There’s a solution for that, and it’s actually quite easy: using CSS to add the URL after the link. That’s really easy to do with the content declaration, like this:

#content a:after {
	content: " (" attr(href) ") ";
	font-size: 80%;

Next to that I used display:none; to hide the menu, sidebar and comments, so you get just the article, in black text, on a white background.

Of course, feel free to have a look at (and copy) my print css!

16 Responses to Added a print CSS style sheet

  1. Shane
    Shane  • 11 years ago

    Why not just use @media sections in one stylesheet?

  2. Joost de Valk
    Joost de Valk  • 11 years ago

    @Rogier: thx, should be fixed now…

  3. Rogier
    Rogier  • 11 years ago

    Hey Joost,

    I believe every self-respected site should use one these days.

    I have one little comment, the url after your title doesn’t have a space between the last word of the title and the url (using print preview in FF2.0.0.14).

    Good luck with it!

  4. Stu
    Stu  • 11 years ago


    Thanks for this, easy fix solution to something that provides a bit more “completeness” to a blog.

  5. archshrk
    archshrk  • 11 years ago

    Speaking of green, I just tried implementing this and it took me a couple of tries before I remembered my sidebars were not called sidebars in my theme.

    Thanks, now I can remove my “Print This” plugin.

  6. Lucas
    Lucas  • 11 years ago

    CSS style sheets are cool and I love your WP plugins Joost – but printing blog posts is an unnecessary waste of paper in my opinion…

    Lets think green people!

  7. Henri
    Henri  • 11 years ago

    Hmm, what’s the support in other browsers? The code doesn’t look nice.

    It’s quite simple to set all header / menu images to display none. In the print stylesheet set new size en positions for your content and ready 🙂

  8. Jermayn Parker
    Jermayn Parker  • 11 years ago

    I like the idea of adding the address after the link.

    Would you also maybe get rid of the color for the links (if have) and maybe create the links to look different (and with the address)? This way it can save colour like you suggested and still make it obvious that it is a link.

  9. Rob Jones
    Rob Jones  • 11 years ago

    Hey Joost. Decided to finally start my own instead of gracing everyone else’s… went looking for blog format ideas. Ran across yours again.

    Hey, we may not exchange Christmas cards for a year or two, but FWIW it looks good with the new face (well, except maybe that cartoon fella). :-p

    Try not to burn the place down when you hit NYC, but have fun. Welcome to America n all that stuff.

    Regards ~ Rob

  10. Stever
    Stever  • 11 years ago

    I recently added a print stlyesheet to a clients site. It was for one particular search results page that lists their products. When printed it includes a work order sheet. The work order is hidden in the screen version of the sytlesheet and only appears when printed.

    It’s an offline business and the owner had always been printing out the products pages to show to customers and let them choose which products they wanted (automotive products for particular vehicles). Adding the work order in the same printout was something they really liked.

  11. Vasilis
    Vasilis  • 11 years ago

    Been thinking a bit about it. You could add a warning to a printbutton, maybe in the title attribute, something like “there are 200 comments on this article, you will need some sheets of paper”. There’s not more you can do.
    The user can always select the range of pages he or she wants to print while in the print dialog. I know, nobody will use that function, but at least leave the choice to the user (-:

  12. Joost de Valk

    @Vasilis: yeah and that’s no real solution…

    @Scott Johnson: yeah I hardly ever print stuff myself, but when you’ve had 5+ requests, you know it’s time to act on it.

  13. Scott Johnson
    Scott Johnson  • 11 years ago

    This is a great idea. And the resulting printout of this post is quite elegant. I haven’t made a print stylesheet since 2000 (wow!), but I’m thinking I just might need to put together a few for some of my blogs.

  14. Vasilis
    Vasilis  • 11 years ago

    Not really. You could add a print button which prompts the user if he wants to print the comments before it sends the print command. You can then hide them with a JavaScript which writes some extra print-css rules.
    That won’t work with command+p though.

  15. Joost de Valk

    true, am wondering if there’s a way to make that optional…

  16. Vasilis
    Vasilis  • 11 years ago

    Why hide the comments? They are part of the content one wants to read on a blog, often with some useful extra info.