Printing pages not meant to be printed

I know that most people out there are not really interested in printing pages from the internets. But hey, some of us are! The main problem you find when trying to print pages is: they (usually) are not meant to be printed! In comes Firefox and its add-ons. More specifically: the Web Developer Firefox add-on. With it you can (among a million other things) change a page’s look by altering its CSS. Ok, this tip is not going to work for everyone, but if you do know CSS, a little bit might go a long way to help you save paper and your poor eyes: the changes you make on the CSS using Web Developer are taken into account when a webpage is printed!

An example: this interview with Jonathan Barnbrook really got me interested and I wanted to print it. It takes just a quick look at the page to realize it will look bad when printed. More specifically, it’ll look like this:

You can see how the font is really really small and a lot of prrrecious paper is being wasted (the article spans 7 printed pages). Now just fire up the ‘Edit CSS’ feature on Web Developer (under Tools-> Web Developer-> CSS). At the end of the code shown on the newly opened sidebar type something like:

* {
background: white;
font-size:12.5pt;
}
table {
width:100%;
}
i {
font-family:Georgia;
font-size:16pt;
font-style:normal;
font-weight:bold;
}
.bodytext{
font-family:Georgia;
font-weight:bold;
}
p{
text-align:justify;
font-family: Times New Roman;
margin:0;
padding:0;
margin-top:0.5em;
line-height:1.5em;
text-indent:25px;
font-weight:normal;
}
.headings {
font-size:24pt;
}

And you’ll get is this:

Notice how fonts are larger, changed and much more readable when printed. All the wasted space is gone and, despite the fact that the printed article still amounts to 7 pages, we are not wasting paper: it is actually being used to improve readability (you could have used smaller “line-height” so that lines are not so far apart; you could also use smaller fonts). And that was just a quick dirty edit of the CSS, the more you want it to look good, the further you’ll get.

Another trick worth mentioning is: if a page has lots of links and you don’t want them to be stupid blue text you can actually write the link address after the linked word, simply use this nifty css rule:

A:after {
/* Expand URLs for printing */
content:” (” attr(href) “) “;
text-decoration:none;
}

See how this:

Magically turns into this:

Hope this was useful.

rhwinter, February 5th, 2007
Filed under: css, firefox, code

Ver este post no 'ruido'