HTML and CSS Reference
In-Depth Information
Chapter 16
Creating a Print Style Sheet
Web designers put a lot of effort into creating pages that look great onscreen but rarely give a thought to what they
look like when printed. How often have you bought something online and wanted to print the invoice? Instead
of a professional-looking document, you get all the website navigation down the side, leaving not enough room
for the figures that indicate how much you paid. If you're lucky, they come out on a second sheet. Of course,
not every designer is negligent. Some go to the trouble of creating a separate print version of the page. Neither
situation is necessary. All that's needed is a print style sheet.
In this chapter, I'll show you how to create styles for printing and to use some of the special properties for
printed output. You'll learn about the following:
•
Planning what to change or remove when the page is printed
media
attribute and
@media
rules to specify which devices styles apply to
•
Using the
•
Setting the margins for a printed page
•
How to avoid page breaks at inconvenient points
What's Different About Print CSS?
There are only a handful of dedicated print properties, all of which are concerned with controlling where to break
the content when the web page needs to be printed on more than one sheet. There's also an
@page
rule, which
sets the margins around the edge of the printed page. Otherwise, creating a print style sheet is no different from
the type of style sheet discussed so far.
You lay out the content of the page the same way, using floats or CSS table display, and controlling
horizontal and vertical space with the
margin
and
padding
properties. You also define font characteristics with
the same properties. The crucial difference is that printing is a static medium. The width of a printed page
is fixed, but you have no idea what size paper will be used, so the content of a wide onscreen layout is likely
to be truncated.
Issues that Need to be Considered
By default, most browsers don't print background colors and images. This can have disastrous consequences if
your web page uses a light color on a dark background: you risk having text that's virtually illegible when printed.
The only exception appears to be white text on black. Most browsers automatically reverse the colors and print
the text in black. Even if your colored text has sufficient contrast against a white background, consider whether it
might be more legible in a darker color or black when printed.
