Perfecting Your Printed Posts
August 14th 2007We have talked before about the basics of making your blog printer friendly. Whilst that will ensure that your content is legible on paper, what if you want to do more? What about sorting out the rest of the troublesome parts of your design?
With some simple adjustments to your print.css, you can make your blog truly printer-friendly.
The Header Area
In a single blog post, we might have 3 different headings; the blog title, the slogan, and the post title, and even some information about the post, such as a date. On screen, we can use CSS to style these however we want, but in print, we have 4 large, separate lines of text. It takes up too much space, and is especially noticeable on shorter blog posts. Look at the following example of how a page on Pro Blog Design printed originally.
To fix this, I used the following code in my print.css, to remove the blurb, and enable the post title and date to lie on the same line.
#content h1 {display:inline;}
#blurb {display:none;}
The result is much neater:
Links
When printing out a page containing links, the browser will revert to the default style of a blue color, with an underline. The problem comes with visited links, which are printed out in purple. The purple looks horrible, and knowing that they clicked on a certain link when they were online doesn't really help the user, so why not remove it? Adding the following code to your print.css will ensure that all links are printed the same, on all browsers.
a:link, a:visited, a:hover, a:focus, a:active {color:#0000cc;text-decoration:underline;}
Images
When you place images in the content, you can use CSS to allow them to fit in with the content. When a page is printed however, those CSS styles are lost, resulting in messy pages and large, blank spaces. To fix the problem, you need only make sure that you copy over the styles from your style.css, into your print.css.
There are a lot of things that can be done with a print stylesheet, depending on your blog. For instance, in the Pro Blog Design print stylesheet, we have edited the comments, to lay out all of the details in a single line. What creative uses can you think of putting print.css to?
Read something useful? Subscribe!
Find other posts tagged with: Accessibility, CSS, Printing, Usability
Twitter
August 14th at 6:56 pm GMT
Comment #1
Michael-- I am trying to implement some of your suggestions onto my own blog.
I have it set up now so that ONLY the contents of the "main articles" will be shown to the printer.
However... the text is ALL formatted in a very tall thin vertical line (as it would naturally be formatted to fit in between my nav bars)
How can I tell the "content" to "stretch" to the entire printer page?
August 14th at 8:29 pm GMT
Comment #2
Tyler, I had a look at your site. You could try adding this to your print.css:
#content {width:100%;margin:0;}It should work. (I didn't test it though)
That may end up being too wide though (I can't remember if it overrides the margins or not). If so, just lower it to 90%, or whatever you think is best.
Let me know how it goes!
August 14th at 9:13 pm GMT
Comment #3
You've exposed some work I have yet to do on my blog!
I'll have to get to it and build a print stylesheet, before it's too late.
Thanks for the post
- Mason
August 14th at 9:26 pm GMT
Comment #4
Michael– thank you for the handing tips. You should join my blogging community.
August 14th at 11:04 pm GMT
Comment #5
Mason - lol, sorry!
It's one of those little things that isn't urgent, but it's well worth doing when you have a little freetime. It makes a big difference when people come to print.
Rose - Glad you liked it. I hadn't seen your community before. I'll take a look at it tomorrow. If it's anything like your blog, I'm sure it will be worth looking at!
August 15th at 3:35 am GMT
Comment #6
Michael,
Very useful and practical information. Thanks.
August 15th at 6:55 pm GMT
Comment #7
Michael-- Now I am unsure if the print.css is not properly made, or if it is just my browser settings.
When I go to print preview in FireFox-- it still (with the adjustment you suggested)
has the text all bunched up in the middle in one straight column... However, if I change the "scale" option in the print preview window to something smaller like 30-50% or so, it all appears to look normal.
Are all of my readers going to intuitively need to know to change this? Or am I just experiencing it as a "not normal" problem?
Thx again for all the help!
August 15th at 8:37 pm GMT
Comment #8
Sadly, no, most people won't think to do that.
Try adding this as well:
.content, .main, .meta {width:100%;}I can't see what is causing the trouble. The font-size has been specified as a percentage at the start, which is something I've never done before. That could well be why the text appears so small.
August 16th at 3:09 am GMT
Comment #9
That does not seem to be doing it either.
I am really stumped
August 16th at 6:05 am GMT
Comment #10
Thank you! I never actually realized there as a difference, I just assumed that printable pages came out in plain text, and website pages came out with design.
August 16th at 9:45 pm GMT
Comment #11
Tyler, I don't know what else it could be. I didn't build the theme, and don't have the time to go through it entirely.
(I've already read through it well, and haven't seen the problem! 
)
August 25th at 10:48 pm GMT
Comment #12
Interesting post. On my blog I use a plug-in that makes the printer-friendly transformation job a breeze.
I wish there could be a counter for it to see how many times people have clicked on that print button.
August 25th at 10:51 pm GMT
Comment #13
Hey Armand - I've seen that plugin around. It's definitely the quickest method, but it forces your users to go to a specific "print" page before printing. Print stylesheets let them browse and print as normal.
And lol - Yes, I'd like to see that statistic as well!