HTML and CSS Reference
In-Depth Information
•
Bullet points missing? In the previous chapter, we suggested that applying background
images was the best method for creating custom list item symbols. When you print
them, though, the images won't show. For that reason you should redefine the display for
print so that the image is attached using
list-style-image
(or simply remove the cus-
tom bullet styles altogether and go with the basic styles that the browser would apply).
•
Provide special offers for printouts. While the browser will, by default, print information
such as the date, URL, and page number, you can add custom information for the printed
version. As an example, if on our travel site you found the perfect vacation and printed out
the details, you could include a print-only section on how to make a booking. This sec-
tion might include a telephone number and a reference number, while the screen view
would instead display a link to the e-commerce section of the site to make an online
booking.
This is just a small selection of ideas that you can almost certainly expand on
depending on the nature of the web site that you run or maintain. Once again, A List
Apart has some excellent ideas about the topic in the articles “CSS Design: Going to Print”
(
http://alistapart.textdrive.com/articles/goingtoprint
) and “Designing for Context
with CSS” (
http://alistapart.textdrive.com/articles/designingforcontext
).
Things to Watch Out For
With a little care and attention, you can create web pages that perfectly suit the printed
medium. Yet be aware that there are some things you need to take into account.
Checking Your Page Width
If you have defined a width for your page using pixels, you will need to redefine that for print
using a real-world measurement such as centimeters, millimeters, or inches. Be sure to allow
for the fact that the printer your site visitor is using may not be able to print right up to the edges.
If you take a US letter or A4 sized piece of paper, measure its width, then take off a couple of
centimeters or a quarter inch from either side, that should give you a printable page width.
Printing Errors with CSS Positioning
If you have reset all the positioning properties as suggested earlier in this chapter, you will
probably not run into difficulties. However, be sure to try printing a web page with a lot of
content—a page that you would expect to run into several printed pages—to make sure that
the entire web page prints. Using floats and absolute position can affect the printout, result-
ing in only the first page getting printed. If this happens, double-check the CSS for the
container of the content that is being “clipped” and ensure that you have set
float:none
and
position:static
.
Note
In case you're wondering “What's that
static
value? And why haven't we heard about it before?”
it's because that's the browser's default positioning model. You would not normally need to set this your-
self—we only have to do this to get around a known printing problem.
■
