have a bandit day

The type of computer you own says a lot about your personality. Desktop-ers prefer processing power and storage. Laptop-ers people enjoy mobility. Computers caked in dust and swaddling in cobwebs signifies a user that doesn’t like sitting in front of their screen.

Some users don’t like sitting at their screen to read articles; in fact, it can even be dangerous. *chuckle*. Others don’t have a laptop and can’t read content away from their computer. How, then, can we bring our content to all our readers?

Linking print stylesheets to your website or blog allows subscribers to print off articles or sections of your website for readers to enjoy at their leisure, making a screen and internet connection unnecessary for reading. Moot!

For websites without print stylesheets, printing can be a disaster. That wonderful graphic of you in the banner will wreak havoc on ink levels, not to mention time and patience. The carefully crafted navigation bar no longer has no purpose (how awesome would it be if you could “click” through printed paper?). Links will only show anchor text (the clickable words), not the destination it’s pointing to.

It can be messy.

Creating a stylesheet for print would and show readers that you have meticulously prepared for consumption of our content, regardless of the situation. So here we gooOO000!

***Disclaimer: I have NOT tried any of these solutions yet.***

Linking the stylesheet:

code:
<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />

Cleaning Up the Page

Create a class called “.no print” and apply it to sections of the page that do not need to appear in the printed copy. These include but are not limited to:

• Banners
• Sidebars
• Images
• Flash / Javascript

code:
.noprint { display: none;}

Width:

Adjusting the width of your webpage to accommodate paper size. Compared to the size of a piece of paper, your monitor is likely to exceed the width of the piece of paper. A recommended width would be 600px; from there you can adjust the rest of the containers to fit your printed page.

Fonts:
Don’t forget about the little guys. Change all colors to black on white for the sake of readability and ink conservation. Size and font family should be taken into consideration as well; think “readability” instead of “style”.

Links:

In the print stylesheet, make sure links are underlined to differentiate from normal text. Not being able to see where the link anchor is pointing to can be a problem sometimes if your anchor text is not descriptive.

Try implementing this code into your css to display (from David Walsh).

code:
a:link:after, a:visited:after { content:” [" attr(href) "] “; }

Two caveats: this may not work in Internet Explorer because of the attribute selector (not supported) and if you have not hidden your navigation bar, the href’s will end up in the article as well.

Having huge links littering your page can also a problem if you decide to display them. Check out this A List Apart article explaining a javascript solution here.

I’ll be creating my own print stylesheet this weekend. Look for  new, printer-friendly versions of my posts in the future. Excelsior!

- bang.