HTML and CSS Reference
In-Depth Information
Browsers turn off background colors and images to speed up printing and avoid wasting ink. it's up to the
user to turn on the option to print them. Always work on the assumption that printing background colors and images
is turned off. There is no way to override the user's setting with CSS or any other web technology.
You also need to take fonts and font sizes into consideration. Users can increase the font size in a browser,
but not on a printed page. So, it's important to make sure all your text prints at a size that is comfortable for the
average person to read. Specify font sizes and other dimensions using physical units of measurement, such as
points, inches, or centimeters.
Links cannot be followed, and the URL is hidden unless you use the URL as the link text. So, it's a good
idea to use the ::after pseudo-element to display the URLs of external links (see “Generating Content from an
Attribute” in Chapter 15 ).
Perhaps the biggest consideration with a print style sheet is deciding which parts of your web page are
unnecessary. Do you really want your navigation menu printed? What about the search form? Neither is going to
be any use on the printed page, so they're good candidates for exclusion by setting their display property to none .
You also need to exclude parts of the page that consist solely of background images, because they won't normally be
printed and will leave unsightly gaps in the page. If an image is important, and you want it included in printouts, it
should be embedded in the HTML with the <img> tag. It's only background images that printers ignore.
What Print Style Sheets Cannot Do
Browser manufacturers and the W3C seem to regard improvements to print-related properties as a low priority.
The CSS3 Paged Media module ( ) remained inactive for nearly six years
until it stirred into life again in mid-2012. Currently, browsers support only CSS2.1 print features, which impose
two important limitations:
You cannot specify the size of the printed page.
The size property was intended to control size and orientation, but Opera was the only major browser that
managed to support it. So it was dropped from the CSS2.1 specification, and moved to the draft CSS3 Paged
Media module. At the time of this writing, Opera is still the only browser to support the size property.
These limitations mean that you don't have the same level of control as you would when designing a
brochure or leaflet. Although it's a fairly safe assumption that most printing will be done in portrait orientation on
letter paper in the U.S. and the slightly larger A4 size in most other countries, your design needs to be flexible.
You cannot change the orientation of the page.
Specifying the Media Type
By default, style rules are used by all types of media that are capable of displaying them. But you can create
separate sets of rules and target them at different types of devices by specifying one or more of the media types
listed in Table 16-1 .
Search WWH ::

Custom Search