Printing with Firebug - mjcpk web design and development

Archive for December, 2008

Printing with Firebug

Wednesday, December 10th, 2008

I use firebug firefox plugin for a number of web design/development related tasks but there is also one general purpose use that I have found for it.

I read a lot of blogs to keep up with news, views and to learn new things about web design/ web development and computing in general. I, like many people, don’t like to read long documents on the screen so I often print them out to read in bed or on a train journey.

Some blogs are well prepared for this and have a printer friendly version which strips out the extraneous stuff and formats things nicely for the printer. This avoids the annoyance of having the ends of lines cut off. However, other blogs don’t offer this feature and the layout of the blog along with the excessive advertising everywhere makes printing them out problematic.

So my solution is to use the ‘Inspect’ feature in firebug to select elements on the page ( the body tag for example ) and I can then edit the CSS ( Cascading Style Sheet ) to lay things out how I want. Whilst this may sound complicated to those who don’t know CSS or anything about Web Design in fact there is only one bit of CSS you really need to know:

Width: 800px;

To use it I click ‘Inspect’ in firebug and then on the element I want on the page ( the blue outlines help me locate what I want ). Usually the only element I need to worry about is the one containing the body text of the article. By adding width: 800px; into the CSS side pane for this element I am ensuring that the lines aren’t cut off by the printer.

The only other modifications I use are to remove any navigation or advert columns. To do this I click on ‘Inspect’ again and select the column in question. Then I right click on the highlighted code on the right in Firebug and select delete element from the context menu and the column is removed instantly. You can do this for any element you like: large headers, unwanted images, google adwords blocks etc.

If you’re feeling adventurous you could even rewrite the CSS to produce a black and white text only ink friendly version.

The changes you make don’t persist and will be gone next time you reload the website. If there is a website that you visit often that you wish to print articles from then you could use greasemonkey and create a script to run every time you visit. Does anyone have any other user CSS solutions?