Printing webpages

As you have probaly already experienced, printing webpages can yield some interesting results. Even if you change the page setup to landscape the pages can still be ugly and unsuitable for print.

So how can we control the way a web page is displayed in print?

It is all about media

<link href="stylesheet.css" rel="stylesheet" 
type="text/css" media="all" />
<link href="stylesheet_print.css" rel="stylesheet" 
type="text/css" media="print" />

So as you can see above the second linked style sheet has media type set to 'print'. This means you can add styles to make the your page more pinter friendly. ( Keep in mind though that because the linked stylesheet above is set to media 'all', the second 'print 'sheet will need to override these styles )

What makes a page printer friendly?

To me making ia webpage readable is the objective. So perhaps things like making the text black with serif font wih a suitable size. Also the text paragraph should fit with in a potrait page.

div#content {	
font-family: "Times New Roman", Times, serif;	
font-size: 12px;	
color: #000000;	
width: 500px;
}

What else? Well some parts of the webpage are a waste on paper, like menus and videos. So you can remove these elements with a display none.

div#videoad {	
display: none;
}

Perhaps also change any background colors to white so the next person who visits your website doesn't clean out a whole cartridge of ink printing your webpage.

Also can be worth removing the underline of your links to blend more with the body text.

a {
text-decoration: none;
}

So there are a few things you can do just by adding in that extra style sheet for print.