Print Style in Actions

Recently I’ve read deeply into some books about web standards, and found out people would be pleased if they can just click the print button in a web browser and get everything they want neatly printed. The books lead me to two excellent articles written by Eric Meyer.
Two articles are: “CSS Design: Going to Print” (www.alistapart.com/articles/goingtoprint) and “Print Different” (www.meyerweb.com/eric/articles/webrev/200001.html).

And this article is the experiences I got during making the print style for PageTalks.com.

Before making a print stlye, the preview is terrible:

What I’ve been told

Eric Meyer sums three ways to implement the print style on a web page.

<LINK rel=”stylesheet” type”text/css” href=”print.css” media=”print”>
@import url(paged.css) print,projection;
@media print {…}

The principles of building a printer-friendly page always require the designers to bear in mind the general idea of saving ink. To do so, we have to accomplish some simple steps:

hide all banners
hide all widgets, sidebars, comments and so on
use white background
assign correct font size for printers

With the font-size properties, point value is doing a better job here and readers will be more comfortable with serif font-family. Eric chose 12pt for font-size, but I think it’s pretty huge value for texts. So I use 10pt instead.
In fact, you need to reset all the properties related to typography using pt. E.g:

body {
font-size: 10pt;
line-height: 15pt;
margin:12pt 6pt;
padding:3pt;
}

body a,body a:link,body:visited,body a:hover,body a:active {
background:#FFF;
color:#000;
text-decoration:none;
}

body h2,body h3,body h4,body h5,body h6 {
line-height:125%;
}

body h1 {
font:bold 10pt/150% helvetica, arial, sans-serif;
letter-spacing:0.3pt;
margin:6pt 0;
text-transform:uppercase;
}

body h2 {
border-bottom:1px dotted #AAA;
font:14pt/150% georgia, times, serif;
margin:18pt 0 6pt;
padding:0 2pt 0 0;
}

body h3 {
font-size:9pt;
margin:18pt 0 6pt;
text-transform:uppercase;
}

body p {
margin:0 0 12pt;
}

body div.entry-date {
border:1px solid #999;
float:right;
font-size:7pt;
margin:0 3pt;
padding:1pt 3pt;
text-transform:uppercase;
}

@import Doesn’t Work

Don’t pannic. Firefox does a good job to load import rule with media type. However, it’s not so lucky with IE6. (I didn’t test IE7 or IE8, since IE6 users overnumbers the total users of IE7 and IE8)
IE6 seems to be unable to parse a @import rule with media type like this:

@import url(paged.css) print,projection;

Without media type, it can obey the import rule as Firefox does. Believe or not! See my test page and play aroud with IE6: Test for Import Rules

Declarations of media is supported by IE6, which means you can add do it like this:

@media print {
@import url("print.css")
}
or just use link tag:
<LINK rel="stylesheet" type"text/css" href="print.css" media="print">

What else should be hidden from printers

Beside font properties, making unneccessary contents invisible is also a tiring task. Technically, besides the contents we’ve listed before, we should hide all interactive components like forms, buttons, inputs and so on. That’s because users can’t interact on the papaer and we just save more ink by not printing them at all. E.g:

The comment form is impossible to be used on a paper.

Some links that triggers a javascript event or point to actions that impossible to take on papers.

Edit link is useless. More often than not, users holding the paper don’t intend to ‘Edit’.

/* Hide unneccessary contents */
body div#blog-description,body div.sidebar,body div#access,
body div#globalnav,body span.archive-meta,body div.entry-meta,body div#footer,
body div.navigation,div#respond,div#trackbacks-list,body div.formcontainer,
body form, body div.serve-bar, .comments .comment-meta * {
display:none;
}

/* Hide contents generated by Javascript and flash */
.lang-select ,body div.entry-content embed, body div.entry-content object {
display: none;
}

Override CSS

It’s ideal to seperate print style and screen style completely. In my case, I don’t want to rewrite the layout in print style. That means I’m bound with the troubles of inheritence.

In the CSS for screen, I specify the widths and postions of containers. It’s time for me to reset it in print style.

You’d better clear the paddign and margin so as to make most of papers
When assigning width values, avoid use px unit; margin of 5% is prefered

/* Override the layout for printer */
body #container {
margin: 0;
padding: 0;
width: 100%;
}
body #container #content {
margin: 0;
padding: 10px;
}

body div.entry-content a.more-link {
position: static;
}

Just watch out if you have to do the similar job.

Where is my LOGO?

Clicked the print preview button and found my logo was gone.
It’s not surprising for you to understand the broswers will hide css background automatically. I use a image replacement technique to display my logo, so the background is just hidden.

The only choice left to me is to use a IMG tag to show the logo.

I re-designed the logo for print and hide it in CSS for screen.

body #header div#blog-description, body #header h1#blog-title {
display: none;
}

body #header {
width: 257px;
height: 58px;
text-indent: 0px;
top: 0px!important;
left: -10px;
z-index: 11111;
}

#blog-logo {
display: block;
}

Final Result

After multiple tweakings, we finnaly got a nice print stlye:

Try to create your own print style!

PageTalks