Working with style sheets for print

In the old days (and, frankly, in the not-so-old days, since the practice somehow survives),
designers often worked on so-called printer-friendly sites, run in parallel with the main
site. However, if you’re using CSS layouts, it’s possible to create a style sheet specifically for
print, which you can use to dictate exactly which elements on the page you want to print,
which you want to omit, and how you want to style those that can be printed.
As mentioned earlier in the book, a print style sheet is attached to web pages using the
following HTML:
<link rel="stylesheet" type="text/css"media="print"
å href="print-style-sheet.css" />
The media attribute value of print restricts the CSS solely to print, and within the print
style sheet, you define styles specifically for print, such as different fonts and margins. In
the example in the download files, I’ve used a version of the business website, which you
can access via the sme-website-print folder in the chapter 10 folder. The print style
sheet is sme-print.css, and if you compare it to the main style sheet, you’ll see that it’s
much simpler and massively honed down.
The defaults section houses a single body rule, defining padding (to take into account varying
printer margins, 5% is a good horizontal padding to use), the background color (white
is really the only choice you should use, and it’s usually the default, but setting it explicitly
ensures this is the case), the text color (black is best for contrast when printing), and the
font. There’s absolutely no point in trying to ape your onscreen design and typography in
print—instead, use values that enhance the printed version. In the example’s body rule
(shown in the following code block), serif fonts are defined for font-family, because serifs
are easier to read in print. Note that you’re not only restricted to web-safe fonts at this
point either—you can define choices based on fonts that come with the default install of
Windows and Mac OS, hence the choices of Baskerville (Mac) and Palatino Linotype
(Windows), prior to Times New Roman and Times.
body {
padding: 0 5%;
background: #ffffff;
font-family: Baskerville, "Palatino Linotype", "Times New Roman",
å "Times", serif;
line-height: 16pt;
}
In the structure section, the #masthead declaration sets display to none. That’s because
this area of the page is of no use for printed output—you simply don’t need website masthead
and navigation offline. (This is, of course, a generalization, and in rare cases this may
not be applicable; however, in the vast, vast majority of websites I’ve created, the printed
version has not required the masthead and navigation links.) Note that if other areas aren’t
required, just use a grouped selector instead of this rule with a lone selector, as shown in
the following code block (which isn’t in the example CSS):
#element1, #element2, .class1, .class2 {/* these items won't be
å printed */
display: none;
}Because pixel values don’t tend to translate to print well, some settings may need to be
redefined. An example in this case is the two-column section of the page. The widths and
margins were initially defined in pixels, but in the print CSS, it makes more sense to define
these values in percentages. (Note that the 9.99% value is there in case of rounding
errors.)
.columnLeft, .columnRight {
float: left;
width: 45%;
}
.columnLeft {
margin-right: 9.99%;
}
In the links and navigation section, only one rule remains. While links are of no real use
offline, it’s still a good idea to make it apparent what text-based content was originally a
link, in order for people to be able to find said links should they want to, or for reasons of
context. Just ensuring the default underline is in place should do, and that can be done via
the following rule:
a:link, a:visited {
text-decoration: underline;
}
For browsers other than Internet Explorer (although JavaScript workarounds exist for IE
compatibility—e.g., see www.grafx.com.au/dik//printLinkURLs.html), you can also provide
the href values alongside any printed links by using the following code:
a:link:after, a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
In terms of fonts, keeping things simple makes sense. It’s also worth noting that because
you’re working with print, sizes in points are more useful than sizes in pixels. (Note that
in the body rule, the line-height value was 16pt, not 16px or 1.6em.) Therefore, the
font-size values all reflect that. Note in the p.footer rule that floated content still needs
clearing in the print style sheets.
The final section, images, is not changed much. The images within the columns were
deemed superfluous, and so display has been set to none for .columnLeft img,
.columnRight img. Elsewhere, the margins on the floated image have been set to values in
centimeters (cm) and the border value for #content img is in millimeters (mm), since we’re
working in print. (Values in pixels are permitted, but they tend to be less accurate when
working with print style sheets—for example, if elements have a one-pixel border, they
may not all be even when printed.)

One final thing that’s useful to know is how to create print-only content. In this example,
removing the masthead from the print output has also removed the site’s corporate ID. A
cunning way to bring this back is to create a black-and-white version of the company logo,
and add that as the first item on the web page, within a div that has an id value of
printLogo.
<div id="printLogo">
<img src="assets/we-lay-floors-bw-logo.gif" alt="Web Lay Floors,
å Inc. logo" width="267" height="70" />
</div>
Then, in the main style sheet, create a rule that displays this element offscreen when the
page is loaded in a browser window.
#printLogo {
position: absolute;
left: -1000px;
}
The content will then show up in print, but not online. Note, however, that you should be
mindful to not hide weighty images in this manner, otherwise you’ll compromise download
speeds for anyone using your website in a browser, only for making things slightly better
for those printing the site. A small, optimized GIF should be sufficient.
If there’s other content you want to hide in this manner, you can also create a generic
printOnly class to apply to elements you want hidden in the browser, but visible in print.
The following CSS rule applied to your screen style sheet would be sufficient for doing
this:
.printOnly {
display: none;
}
The reason for not using this generic method with the logo is because at the time of writing,
Opera appears to only print images cached from the normal page view—in other
words, if the image isn’t displayed in the standard browser window, Opera won’t print it.
Therefore, if using the generic printOnly class, be aware that any images hidden won’t
print in Opera, but text will.
An example of how the print style sheet looks is shown in the following screenshot.

 

Note that you can take things further in terms of layout, but it’s best to keep it simple.
Also, ensure that you use the Print Preview functions of your browser test suite to thoroughly
test your print style sheet output and ensure that there are no nasty surprises for
visitors to your site. Ultimately, it’s worth the extra hassle—just amending the fonts and
page margins and removing images and page areas that are irrelevant to the printed version
of the site not only improves your users’ experience, but also makes the site seem
more professional.