HTML and CSS Reference
In-Depth Information
So, how are we doing with the print-only makeover? Figure 13-3 shows the progress so far,
but as with many things in life there's still room for further refinements if you make the effort.
Figure 13-3.
The final result? There's always more to do!
Tips for Even Better Printed Pages
Our previous example showed a simple printout that you can achieve by resetting certain CSS
properties and redefining others. There is more that you can do to improve matters, though:
•
Use serif fonts. Because of the low resolution that monitors provide, and the fact that
a large number of users do not have something like ClearType (
www.microsoft.com/
typography/cleartype/tuner/Step1.aspx
) enabled, small-sized serif fonts often look poor
on screen—there simply aren't enough pixels available to render all the little flourishes (or
serifs) at the ends of letters. It's no mistake that a large number of web sites use sans-serif
fonts (such as Verdana, Arial, and Helvetica) on screen; the lack of serifs makes them eas-
ier to render and thus easier to read.
On screen
. For the
printed
version, though, you can
quite easily use a serif font, such as Georgia or Times New Roman. Serif fonts provide
extra shape to the letters and can often help distinguish among similar-looking charac-
ters; the serifs also create an implied horizontal line that's supposed to aid readability.
•
If you've lost background images for print, you might be able to work around this by
including an inline image that is hidden in the main style sheet (give it a unique
id
so
that you can reference it) with a
display:none
but is made visible in your print CSS file
using
display:block
or
display:inline
. The downside is that you are including an
image that, for the vast majority of users, will not be seen but will still get downloaded
to the client. If that's something that concerns you (and it probably depends on how big
the image is), you could use CSS-generated content to dynamically write in the image—for
example, in the print style sheet,
div.offer:after {content: "<img src='printimage.gif'
alt="Special offer" />"}
. But remember that IE 7 and earlier won't pay any attention to
that code. Certainly, the former technique enjoys better support.
