HTML and CSS Reference
In-Depth Information
Written Communication: Tips for Effective Printing
One challenge of printing a Web page is that what works very well on the screen often
fails when transferred to the printed page. For example, some browsers suppress printing
background images, so that white text on a dark background, which appears fine on the
computer monitor, is unreadable when printed. Following are some tips and guidelines you
should keep in mind when designing the printed version of your Web page:
•
Remove the clutter
. A printout should contain only information that is of immediate use
to the reader. Page elements such as navigation lists, banners, and advertising should be
removed, leaving only the main articles and images from your page.
•
Measure for printing
. Use only those measuring units in your style sheet that are appro-
priate for printing, such as points, inches, centimeters, and millimeters. Avoid expressing
widths and heights in pixels because those can vary with printer resolution.
•
Use serif fonts
. Serif fonts such as Times New Roman and Georgia were originally
designed for printed material because the serifs make text easier to read at smaller font
sizes. Use serif fonts for your body text, reserving sans-serif fonts such as Helvetica and
Arial only for headers.
•
Design for white
. Because many browsers suppress the printing of background images
and some users do not have access to color printers, create a style sheet that assumes
black text on a white background.
•
Avoid absolute positioning
. Absolute positioning is designed for screen output. When
printed, an object placed at an absolute position will be displayed on the first page of
your printout, potentially making your text unreadable.
•
Give the user a choice
. Some readers will still want to print your Web page exactly as it
appears on the screen. To accommodate them, you can use one of the many JavaScript
tools available on the Web that allows readers to switch between your screen and print
style sheets.
Finally, a print style sheet is one aspect of Web design that works better in theory than in
practice. Many browsers provide only partial support for the CSS print styles, so you should
always test your designs on a variety of browsers and browser versions. In general, you
will have the best results with a basic style sheet rather than one that tries to implement a
complicated and involved print layout.
You've seen how to use the
media
attribute for printing. Another goal of the
media
attribute is to provide an easy way of creating style sheets designed for handheld
devices such as mobile phones and PDAs. In a perfect world, all mobile browsers would
respond only to style sheets written with the
handheld
device type, but that is not
what has occurred. Support for the
handheld
device type is mixed and inconsistently
implemented.
Some mobile browsers read only style sheets written for handheld devices; others load
a handheld style sheet if one exists, but apply a screen style if it is the only one available.
A third group of mobile browsers loads
both
the screen style sheet and the handheld
style sheet, and then attempts to reconcile any differences between them.
Finally, most of the newer mobile browsers simply ignore the
handheld
device type
altogether, treating a handheld device as simply another screen device, albeit with a
much smaller screen. Thus, even though
handheld
is a CSS media device type, it is not
practical to rely on it.
How, then, do you design your Web site for mobile browsers? In the next session,
you'll solve this problem through the use of media queries.
