oleg-puzanov.com.ua

Printable version of your site is very useful – your visitors can print out needed information about your products, services, etc. Every time they click “printer-friendly version” link, browser load a separate document that presents exactly the same information with another layout, and probably another markup. Usually, this is just stripped-down version that’s more suitable for print output.

In this very short tutorial we will adapt your pages for printing using CSS.

1. CSS allows us create media-specific styles for a single document. So we need to create new CSS file (print.css for example) and specify that this stylesheet will be used for printing

2. Let’s assume that your site have two column’s layout with header and footer.

So we need to hide #menu and set #content width to auto.

#menu {
    display: none;
}
 
#content {
    width: auto;
}

3. Very often we used background colours and background images for whole body or elements like sidebar, header, etc. So it’s a good practice disable it for printing. Also let’s set our #content font colour to black for better readability

body {
    background: white;
}
 
#content {
    color: #000;
    background: transparent;
}

4. It’s good idea to use points (absolute font lengths) instead of pixels (Relative font lengths) for your font size. You can pick any size you like, but 12 points is a very common size for printing web pages.

body {
    font-size: 12pt;
}

5. To make links on pages more visible let’s set text-decoration to underline and font-weight to bold;

a:link, a:visited {
    color: blue;
    font-weight: bold;
    text-decoration: underline;
}

6. In a fully CSS2-conformant browser, we can parenthetically insert the URLs of the links after each one, thus making them fairly useful to anyone who has a copy of the printout and a web browser handy. Here’s the rule, which restricts this effect to the “content” div and thus avoids sticking a URL in the masthead:

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

Final result:

body {
    background: white;
    font-size: 12pt;
}
 
#menu {
    display: none;
}
 
#content {
    width: auto;
    color: #000;
    background: transparent;
}
 
a:link, a:visited {
    color: blue;
    font-weight: bold;
    text-decoration: underline;
}
 
#content a:link:after, #content a:visited:after {
    content: " (" attr(href) ") ";
    font-size: 90%;
}

Further reading:

http://www.alistapart.com/stories/goingtoprint/

http://meyerweb.com/eric/articles/webrev/200001.html