COM271, Week 5

Media: Separate style sheets for screen and print

Syllabus | Table of Pages | Assignments | References and Useful Links

The style sheet attribute media permits development of separate style rules to be called depending on display devices. media="all" is the default for style sheets, but rules made for low resolution monitors (media="screen")—rules with flexible relative width units (em, %) and color—may work poorly in the confines of a 6.5 x 9 inch printable piece of paper in a black and white home printer; separate instructions may be assembled in a style sheet with media="print."

(Other media types are currently defined (aural, braille, handheld, projection, tty, and tv), but few of these are supported in current browsers.)

Print style sheet: You make a print style sheet by using a second style element with media="print", or by adding a link to an external style sheet:

<style media="print" type="text/css" rel="stylesheet">....

<link href="css/print.css" media="print" type="text/css" rel="stylesheet" />

Units for print: For the most part, screen monitors have low resolutions; designing for a normal resolution of 72 pixels per inch produces useable results on most screens (see Images). Printers, however, vary greatly in their resolutions, say, from 300 to 4800 dots per inch. Equating a pixel to a printer resolution leads to unpredictable results. Instead, print style sheets use units of type size or absolute lengths, which each printer device is able to translate into the appropriate number of dots per inch.

Print units include:

• points (pt): there are 72 points per inch, so a normal print size would be 10 to 12pt.
• picas (pc): one pica is 12 points, so there are 6 picas to the inch.
• inches (in) or centimeters (cm): used for padding, margins, etc.

Fonts for Paged Media: Paged media is the general term for any content that is rendered on a printer. Because printers can make characters with greater precision, they are able to take advantage of serifed fonts, allowing the tiny "feet" to create a visual sense of a line of text across the page, without the blur of a low resolution media like screens. Sans-serif fonts like arial, helvetica, or Verdana may be replaced with serif fonts like Times or Garamond.

Converting a Screen Style Sheet to Print: To build an initial print style sheet, copy the entire site's screen style sheet into a new style element. Temporarily eliminate the screen sheet by reassigning it to media="aural". Then temporarily assign your new (print) style sheet so that you can see it in your browser, using media="screen". Then proceed slowly with conversion, checking results frequently by looking at the refreshed page on the screen. When finished, re-convert your temporary screen back to print (media="print") and re-convert aural to screen (media="screen").

The process of converting rules starts with eliminating parts of the page that should not print. This may include navigation, parts of the page devoted to news or ads, or some images, and some parts of page banners (logos, etc.). These are simply given a rule {display:none;}.

Second, convert all colors to black and white or gray. Although a black and white printer will approximate some shade of gray when it encounters color, you are safer to assign the gray yourself, as the result will then be predictable. Also, remove background images that conflict with print readability.

Convert all fonts to serif. Replace pixels with points for type. Replace percentages with inches or centimeters. Adjust widths to fit the 6.5 inches of space normal to most pages. Check that floated elements or parts of the page that are moved outside of the normal flow of the page (see negative margins), are adjusted so that they stay within the printable area.

Next Up: Controlling Page Breaks in Print Media, a section based on the need to break content for paged media.