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).
   
3. Now edit your Header.php file and add to it the line :
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.

(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

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically each day to your feed reader.