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.
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.
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;’.
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’).
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.
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.