posted on 18 April 2013


Save Paper using your Web Development Tool (e.g. Firebug)

TAGS: Accessibility,Browsers,Print

This morning whilst printing an article called ‘An MVC 3 Contact Form’ (see it here), I was overcome with a little guilt when presented with a Print Preview that showed me a fair amount of content I was about to print that I really didn’t want or need.

The Original Print Preview

Only printing the required pages has been something I have done for a long time (e.g. I seldom print the pages with the comments on at the bottom), but why did I need the left hand menu full of clickable links on a piece of paper?  At this point, I should point out that the blog post had already been customised a little for the Print Medium as the three column layout becomes 2 in the print preview.  However, that was still one too many for me.

I want to keep the name of the author/blog etc as a mark of respect so I will do so where possible, but I don’t need the advertisement banner at the top so that’s my first update.  Basically, a print stylesheet overwrites basic styles on a page when the browser detects that it is being looked at from the context of a Printer.  But we can do this manually ourselves using Firebug or equivalent.

Step One  -  Open your Web Development Plugin within the browser (as mentioned, I’ll be using Firebug) and select the element it is you don’t wish to appear.  Please note that in many cases you may need to follow the parent containers until you find the outer most one as is the case in the example below.

Finding the element requiring display: none

Step Two - In the right hand side of your development tool you will see the properties assigned to that element.  Each development tool has its own way of allowing you to add in a new one.  In the case of Firebug, you double click.  Do this and add the property ‘display: none;’.

Hiding the element

Step Three  -  Check the Print Preview again and it should be gone!  Repeat this step for other elements you don’t want (in this case I’ve applied the same technique to the left hand column ‘colLt’).

Hiding the elements

Step Four  -  Finally, the last thing we see in the preview, is that despite not showing the unnecessary column, we are still not using the full width, so as above I’m going to find the offending element, but this time I’m just going to adjust the width (currently measured in pixels) so that it spans 100%.  Perfect.

100% Per Cent

I print only pages 1 – 4 to avoid printing the unwanted comments and…  actually it looks like it would have only taken 4 pages anyway.  But normally, particularly with longer articles, this would have helped and saved paper!  B’ah.

The end result print preview


John manages the Frontend team, working hard to ensure testing and standards are kept high and his team are all up to date with the latest best practices etc. He’s a keen frontender himself, specialising in pixel perfect layouts and cross browser compatibility. He also has a love for playing around in Photoshop though more and more is enjoying the project management side of things.

Find out more about John here.


Kate said:

John Burley, you and your work are awesome!

add your comment

Email me when other users reply