Printing

Usability research shows that the greater the amount of text, the more likely someone is to print a page to read offline.
The biggest difference between the screen and the printed page is the (apparent) resolution: While the most common (2007) full-screen width is 1024 pixels, the width of the printed page is effectively (at 72dpi) just under 600 pixels.

We'll cover two approaches to printing from the web:

Creating pdf documents explicitly to print
Adding a print stylesheet with CSS rules that only come into play when a web page is printed.

CSS media

on screen

printed page

Examples:

The articles on A List Apart generally look much different when printed from how they look on the screen.

fish4.html has been enhanced for printing. Try out printing (without using your printing budget) by choosing "File | Print | Preview" from your browser, and see how the print preview looks different from the "screen view".

Specifying different styles for print and screen

You can set different styles in the <head> section of a document like this:

<style type="text/css" media="print">
...
</style>

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

others

Sizing text

body{
  font-size: 12pt;
}

Background color

In your print stylesheet, you should set the background color to white, and set the foreground color to something dark. E.g.:

body{
 background-color: #fff;
 color: #000
}
#content{
 background-color: #fff;
}

Hiding the navigation

Your site's navigation is usually unnecessary (and generally unusable) on a printed page.

If navigation links are all in one division, you can hide them on what's printed out by setting display: none in your print stylesheet.

.sidebar{
 display:none;
}

Margins

In print, you won't need to allocate the space for the the sidebar division, and you'd like the text to spread out over the whole width of the page (less some convenient amounts at the left and right...)

#content{
 padding-left: 20px;padding-right: 20px;
 margin: 0 auto;
}
#lotsatext{
 margin-left: 0px;
}

Links

Of course, you won't be able to click any links on the printed page. But there is a sneaky way to tell the browser to print out the URL associated with a link so that someone could use the information on the page to get to the link location. Browsers that are fully CSS-2 compliant print out the URL after the link text with this style rule:

#lotsatext a:link:after, #lotsatext a:visited:after {
  content: " (" attr(href) ") ";
  font-size: 80%;
}

PDF documents

pdf or portable document format is a human-readable document description standard invented by Adobe.

Making PDFs

On a Mac

Choose "File | Print | Save as PDF..." from any program. That's it!

Creating a pdf under OS-X

On a PC

...it's a little more complicated

Some programs have ways of exporting to a pdf. MS-Word had a 'pdf-maker' toolbar that you could turn on:

PDF-maker toolbar

The most general way that will work with any program that can print to a printer involves:

first capturing the postscript printing output from any program,
and then converting a postscript file to pdf format.

Printing to a file

Under windows, when you choose "file | print" from any software, you can choose on the next dialog box to print to a file instead of to the printer. As long as your printer is a postscript printer, if you check the box on the print menu to print to a file instead of to a printer, the resulting file will be a postscript file:

From postscript to pdf

Postscript is also a page description language from Adobe. On-campus, you can use the Adobe distiller (look under "Programs | Adobe | Acrobat" to convert postscript (.ps) files (or "encapsulated postscript"--.eps files) to pdf files.

Away from campus, there is also a free program "Ghostscript" that can open and display postscript files on a PC, and also save .ps files as .pdf.

When to use pdf files

Advantages

Fonts are stored in the file, so you get complete control of typography
You get much more "print-like" precise and reproducible control over document appearance.
More folks can view pdf files than can view MS-Word files.
We'll see that it's pretty straightforward to tease content out of any software package that can print. So, this is an attractive "quick-n-dirty" way to get content from desktop publishing programs/spreadsheets/etc/etc onto the web.

Disadvantages

Your audience must have the (free) Adobe PDF viewing plug-in installed.
Files can become big (they've got all that font info in them...)
It's somewhat more complicated to work with graphics in the pdf file.
Not all search engines are able to index the text in a pdf documents. (Though Google can, and will even produce an html 'approximation' to the pdf document). A typical way around this is to link to the pdf file from a web page that describes what the file is all about.
A pdf document is like a "snapshot" (or the jpg web copy of a Photoshop image): You usually can't edit the pdf directly, but have to go back to your original application (usually Word or Excel) to edit the original and re-export the contents. It's probably a good idea to save a copy of your original 'source' document in the same folder on a webserver where you put the pdf document.

Overall, this allows us to recommend pdf mainly for two situations:

when you know people are going to want to print your content, and it's important to have control over the printed format. The IRS uses pdfs very effectively to deliver tax forms.
Small organizations that don't have the resources to have an html-based production process in addition to their paper production process can still get their existing paper-materials -> on-line and looking fairly professional without developing the peculiar experience of how to deal with HTML layout, tables, CSS, etc.