Make your blog printer friendly!

On November I saw on digg a link to Dave Child‘s mod_rewrite cheat sheet. While visiting his blog I found out a comprehnsive collection of cheat sheet and a blog post about making printer friendly pages using CSS. I was amazed to find out that CSS allows authors to create media-specific styles for a single document. This with the display:none CSS declaration made things easy to implement a printer friendly version of your blog (or website, of course).

I searched the web for a generic printer friendly CSS for WordPress or something similar, but found nothing. I did find some helpful resources like:

  1. Codex: Styling for Print – explanations, samples and links
  2. Aleeya.Net: CSS Printer Friendly for WordPress – a sample CSS (didn’t work on Cutline theme) an some tips on how to make your own CSS.
  3. A List Apart: Going to Print – article by A List Apart on how to make a CSS for printer-friendly page version.

After reading this , I understood that there’re no shortcuts – I will have to make a CSS suitable for my theme by myself. I decided to make a printer-friendly CSS for the Cutline Theme (see it working on Opher Brayer’s Blog). Although I’m not a CSS expert it wasn’t that hard, and didn’t took more than 1 hour.

The process of making the new CSS are as following:

  1. Make a copy of the original CSS file (usually style.css) and name it print.css.
  2. Now go through the CSS and replace every styling that seems that doesn’t need to be on the paper with display: none. (see sample).
    CSS Sample
  3. Now edit your Header.php file and add to it the line :
    <link rel="stylesheet" type="text/css" media="print" />
  4. From this point you can start testing your results. Just open any of your posts in a web browser, and watch the print-preview (usually available in the File menu). You will probably see still some stuff that shouldn’t be there, bad font sized, etc… What I did is using A List Apart recommendations and tips – setting the background color to white, making all my font size 12pt, adjusting links colors, removing the heading font sizes (so that they will be adjusted to the main font size) and so on.
  5. I did some adjustments to the footer.php file too:
    1. I put the “Cutline by Pears…” notice in a div, so that I can make it vanish in the printer version.
    2. I added the permalink there, so that it will be printed with the text. I had to modify the original style.css to make it invisible on the screen-version.
    3. Added the printer friendly web site Pixel Badge (see below).
  6. Also I made the text float around the images, so it will save space…
  7. There’s a trick to make the link address appear with the link title, but I didn’t like it so I didn’t add it to my CSS. You can see a sample of how doing this on the A List Apart article.

That’s it! You can download the CSS I made along with all the modified files in one small ZIP file – Cutline_PrinterFriendly.zip.

Because currently the user can’t know if the site uses a different CSS file without reviewing the sourcecode of a page, I’ve
created a Pixel-Badge (using CoolText) that states that the page is Printer-Friendly.
Printer Friendly Web Badge

(available on Flickr – just click on the badge)

I’ve created a section on the mentioned above Codex page named “Themes with Printer Friendly CSS” . I welcome you to post there links to printer friendly themes and printer friendly CSS files for themes made by others.

On next week I’m planning making fUnique theme printer friendly (that’s the theme that being used on this blog).

I hope this will help you, and of course – your comments are very welcomed.
Arik

  • Pingback: Opher Brayer is Printer Friendly | Opher Brayer’s Blog

  • Pingback: אריק מתבטא » Blog Archive » איך לעשות בלוג ידידותי למדפסות

  • Pingback: וורדפרס עברית » ארכיון » המלצות קריאה לבלוגרים : חתרנות, מדפסות וכתיבה לאינטרנט

  • http://www.my-improvement.com Ken D

    I’m trying to make my blog print friendly and your post was very helpful. Just wanted to say thanks for the information.

  • arik

    Happy to help, Ken. :)

  • http://www.martinlutherneenah.org Troy

    Arik,

    Our church/school has asked me to use WordPress as the vehicle to put our monthly newsletter online on our website. I have no experience with this product yet, but it sounds awesome. This way the Pastors and other lay-members who submit articles and information can log in themselves and post their articles instead of just sending them to a secretary to layout for the newsletter. However, not everyone in our congregation has a computer with internet access so we would still like to offer them a paper newsletter. The problem is, we don’t wish to duplicate our efforts.

    To this end, I’m trying to find a template or CSS code that we could use that would pull all entries that were submitted to the blog within a single calendar month and display them in a sort of newletter-like layout for print.

    Do you know of anyone who has made such a thing or know anyone who could design something like this?

    Thanks!

    Troy

  • http://ignasitrochut.blogspot.com Ignasi

    Hello!

    Recently I have made a post where I where I show how to add the Printer friendly hack in Blogger

    So if you are interested in this information, here you can read the post.

  • arik

    Thanks, Ignasi.
    You’re welcomed to use the PixelBadge.

    Arik

  • Mike

    It’s very beautifully.

  • http://www.tonerall.com Dave the HP Toner expert

    Great tip! Never knew that could be done. Now I can offer this solution to clients that need to print their WP blogs. Thanks again.

  • Kjell

    Great walkthrough this and helped me speed up things even if I already knew what I wanted.

    Arik – did the permalink on this work for you on all pages? I had problems that the permalink on the printed page would only be correct for pages and posts. Whereas on category, front and other pages listing posts and pages it would give the URL of the last post as a permalink.

    Otto gave me the solve for this, thought I’d supply in case others struggle:

    http://wordpress.org/support/topic/147484#post-662332

  • arik

    Kjell,

    It worked for me. But it depends on the original theme that you’re editing, and where you put the permalink. As Otto said the call to the permalink has to be inside the loop.

    Anyway glad I could help :-)
    Arik

  • arik

    BTW, I’ve just noticed that you’re using modified cutline. You could have tried to use the CSS I made for OpherBrayer.com…

  • http://kjell.langvass.org Kjell

    Hi all,

    thought I’d mention here – Stephanie Boot has started developing a plugin to help make any theme printerfriendly similar to this.

    If you all contribute information on how you made each of your themes printer-friendly she might end up with a very nice plugin.

    Check: http://climbtothestars.org/archives/2008/01/07/print-css-plugin-wordpress-needs-css-guru/

  • Ruisdipspes

    Hello

    G’night

  • http://www.techlookz.com Niyaz

    thats real nice will help for my lyrics blog .. bcoz most of them need a printout :)
    Thanks friend for this

  • http://www.aleeya.net aleeya

    I just wanted to say thank you for including my site in reference to your article! It is very much appreciated :)

  • http://khagyun.org Jake Sterling

    The information about converting a web page to something printable is great. I noticed that some of the code you presented as an example did not show up in your article, so I looked at the source code and there it was. It seems that the browser was interpreting your example as part of the source code. The easiest way around that is to type in the code-example in the HTML mode of the posting input page. So, here is what you typed:

    « Now edit your Header.php file and add to it the line :

  • http://khagyun.org Jake Sterling

    Oops, I didn’t realize there was a space limit. Here is what you have to type if you want code examples to show up;

    Now edit your Header.php file and add to it the line :
    <link rel="stylesheet" type="text/css" media="print" />

    Jake

  • http://www.arikfr.com/ Arik

    Jake – thanks !! :)

  • http://www.freelancewebdesigner.me Freelance web designer

    That was really usefull, I am going now to apply it to my wordpress css file and to make it printer friendly , as i never thought oneday someone will like to print one of my pages , lol ,
    Thanks mate

  • http://www.arikfr.com/blog/ Arik Fraimovich

    Glad to help ! Enjoy :-)

  • http://www.kocaeliteknikservis.com/ toner dolumu

    GREAT! very cool

  • http://www.arikfr.com/blog/ Arik Fraimovich

    Delete.

  • http://www.dashingmall.com/sf1/Search-88.aspx Tricia

    Nice way to save printer ink. It also saves the expenditures on stationary. You may find effects in couple of months.

  • http://www.ericastjohn.com Erica Ann

    Thanks for the mention! Mine is just a basic one to show you how to do your own.. not sure it works by default.

  • http://www.awhooty.com A Whooty

    greate information, thanks

  • http://professional-suggestion.com/ Uninstall Program

    Thanks for your nice sharing:)

  • notebook parçaları

    Thank you for inquiring. Been working very nice.
    An excellent blog about perfect. Thank you again..

  • Lalaxy 2010

    Thank you for the useful tips.
    http://www.printerribbonsupplies.com/

  • http://www.lifespanmeds.com/coaxil.html Buy Coaxil

    Thanks for the tutorial. I have great importance with it. I am looking for this for the last few hours.

  • http://www.printhead911.com Bulk Ink

    The print.css is infact very essential here.. It may give the readers a good option of carrying your blog offline with proper credits to you

  • http://www.hpclprinter.co.cc Hpclprinter

    Very great tips ! thank you for infomation :)

  • printzoneau printzoneau

    printer cartridges
    WOW! what a great idea! That seems like a ton of work, but well worth it. Thank you so much for posting that!

  • Lanier Toners

    You made some respectable points there.I am truly impressed.Thank you for sharing this!
    Lanier Toners
     

  • http://www.originalcartridges.com.au/ Printer Cartridges

    Definitely something to think about when it comes to blogs.  A lot of people still like to print interesting material and it’s helpful when the printout is easy to see.  That way they’re not wasting their ink cartridgeseither

  • http://www.dptok.com/ Banner printing oklahoma city

    Exceedingly educative thank you, I presume your current audience would definitely want a good deal more writing like this carry on the excellent hard work.
     

  • Fujixeroxsolidink

    You made some respectable points there.I am truly impressed.Thank you for sharing this!
    Fuji Xerox solid ink cartridges at discount prices delivered fast Australia wide from Printzone!
    Fuji Xerox Solid Ink Cartridges

  • facebook fans

    oopss
    I dint get by the way