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!

Tags: ,


Yoast.com runs on the Genesis Framework

Genesis theme frameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides you with the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Read our Genesis review or get Genesis now!

16 Responses

  1. VasilisBy Vasilis on 2 March, 2008

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

  2. Joost de ValkBy Joost de Valk on 2 March, 2008

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

  3. VasilisBy Vasilis on 2 March, 2008

    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.

  4. Scott JohnsonBy Scott Johnson on 2 March, 2008

    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.

  5. Joost de ValkBy Joost de Valk on 2 March, 2008

    @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.

  6. VasilisBy Vasilis on 3 March, 2008

    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 (-:

  7. SteverBy Stever on 3 March, 2008

    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.

  8. Rob JonesBy Rob Jones on 4 March, 2008

    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

  9. Jermayn ParkerBy Jermayn Parker on 5 March, 2008

    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.

  10. HenriBy Henri on 5 March, 2008

    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 :)

  11. LucasBy Lucas on 7 March, 2008

    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!

  12. archshrkBy archshrk on 20 March, 2008

    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.

  13. StuBy Stu on 25 March, 2008

    Joost,

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

  14. RogierBy Rogier on 24 April, 2008

    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!

  15. Joost de ValkBy Joost de Valk on 24 April, 2008

    @Rogier: thx, should be fixed now…

  16. ShaneBy Shane on 15 May, 2008

    Why not just use @media sections in one stylesheet?