Making pages Printable using CSS

The issue

When web pages are printed the results are sometimes unsatisfactory. Using CSS, authors can often improve this significantly though browser support for some print rules is still somewhat limited.

Although web pages are most commonly viewed on screen site visitors sometimes wish to print them to hard copy.

One approach is to offer a special 'printer friendly' version of a page. This is accessed via a link on the page and can be formatted to produce a good printed result. One penalty is that two versions of a page must be maintained with concomitant risk that the content of the two may differ; another is that the visitor may miss the link and use the normal method of printing so the effort is wasted.

Fortunately CSS styles provide an alternative approach. A special printer style sheet can be developed. A page may then be printed using menu instructions such as File > Print in a browser.

Media types

The CSS specification includes many types of media: Braille, Embossed, Handheld, Print, Projection, Screen, Speech, tty and TV. At present only Screen and, to a lesser extent, print are widely supported.

An earlier version of the specification had an 'Aural' type but this has been replaced by 'Speech'.

If no special steps are taken a CSS style will be applied to any and all media encountered but it is possible to target stylesheets or individual rules at particular media. The usual rules of precidence apply so any rules or sheets intended for particular media should come after those applying to all.

This page is about 'Print' type media.

Print style sheets

Print stylesheets can be either internal or external (linked) sheets. What is needed is some means of identifying such sheets with the purpose for which they are intended. This is done using one of two methods.

• For complete style sheets specify the HTML 'media' attribute for the link or style element.
• For individual style rules or groups of rules use the CSS @media rule.

Using the 'media' attribute

The normal form of a link to an external style sheet, in the header of a file, is

To apply this to print media only change it to

media="print" >

The normal form for the opening tag for an internal style sheet is

To apply this to print media only change it to

Using the '@media' rule

Sheets that apply to all or several media may have individual rules tagged to apply only to print media. To do this rules must be enclosed in the @media rule.

For example the body could be styled to remove the margin and background and specify the font size in printer units

@media print 
 {
 body { margin: 0; background-image: none; font-size: 12pt; }
 }

This shows a single rule being changed but rules may be grouped.

@media print 
 {
 p { font-size: 10pt; }
 h1 { font-size: 14pt; }
 h2 { font-size: 12pt; }
 }

Styles for print media

So what changes might you want to make to make a page print better?

Dimensions

The first thing to consider is probably whether the dimensions and units of measurement in the style sheet are appropriate for printing.

The CSS Specification provides specific methods for specifying the characteristics of the printed page which includes size and margin and allows different margins for first, left- and right-hand side pages and even allows classes to be applied to different parts of a document to allow these to be changed. The method is based on the @page rule. Unfortunately support for this rule is almost non-existent with current browsers so this guide recommends alternative, albeit not as flexible, methods.

Margins

The browser will provide a means of setting the page margins, probably by invoking the Printer Properties set up. That being so the best option to set in the print stylesleet is usually to set the margin to zero and allow the print set up to have full control. Otherwise the margins set will be additive.

Fonts

CSS rules allow font size for printed media to be specified in any of the normal ways but the unit almost universally used for print media is the point and there appears to be no good reason to use any other.

A possible print style sheet might look like

@media print {
 p, h4, ul, ol, td, a { font-size: 12pt; }
 h1 { font-size: 24pt; } 
 h2 { font-size: 18pt; } 
 h3 { font-size: 14pt; } 
 h5 { font-size: 10pt; }
}

Font colour also needs to be considered. Many printers print in monochrome. Rather than hope that any colours used will be interpreted suitably it is better to take the bull by the horns and change color to black.

Other dimensions

Where items are positioned, indented or given sizes on a web page this is frequently expressed in pixels. The specification does not include any rules for mapping these to paper dimensions. If you want to be really fussy may wish to substitute inches or centimetres. In practice the effort is rarely justifiable as browsers make reasonable assumptions. Dimensions expressed as percentages work as normal.

Selections

An important consideration is exactly what should be printed — is there material on the page that does not need printing?

• Menus and links and on the page will be inactive when printed. Internal links may usefully be omitted but external links which are not explicit may need to be converted to full urls.
• Printer ink and print time can be a precious resource. Minimising use may be helpful to the user.

Menus

To print a navigation menu is a waste of time and space. Items like this can be prevented from printing by using the style rule display: none; this not only removes the visible element but also removes the space otherwise reqired for it. This rule can then be attached to any item which is not to be printed by using a class like 'noprint'. A rule to do this could be:

@media print {

 .noprint { display: none; }
 }

Simply tag any item not to be printed with the class 'noprint'. This will have no effect on screen since it is defined only for print media. Being able to tag items with several classes is convenient since adding the noprint class has no effect on any other class attached to an item.

External links

Authors normally don't show the URL of external links on screen. This makes the page tidier while links still work when clicked. When printed such links become unrecognisable and useless. It is easy to set a rule in the print stylesheet as described in Lab Note Maximise the value of your hyperlinks ^{[Ref 2]}

Images

Images are the raison d'être of some pages so must be printed, in others they vary from major irritants to incidental material which may be omitted to save time and ink. The same approach can be used as for menus or, if all images are to be suppressed, the img element, or its holder, may be given the style display: none;

Backgrounds

Some browsers will not print backgrounds at all. Others offer options, but this cannot be relied on. This applies both to background images and solid colour. It is usually preferable to set the backgrond colour ot transparent.

Paged media

Having decided what to print and where to print it, the next thing to consider is page breaks. This is a concept completely alien to screen devices. Of course the page author cannot know the size of the sheet that the page will be printed on, so manual page breaks are out of the question and we must resort to using automatic page breaks. Anyone who has used a word processor or desk top publisher will know that this is a 'dodgy' process. No less with web pages, but the CSS Specification does provide some assistance.

The CSS2.1 Specification ^{[Ref 1]} covers paged media in section 13. As already stated, the @page method is largely unsupported as yet, but two properties which may improve printed layout are page-break-before and page-break after. These may be set to a value of 'always, 'avoid' or 'auto'.

Typically authors may force a page break before a major heading, for instance:

h2 {page-break-before: always}

Similarly other headings can be kept with their associated content by:

h3 {page-break-after: avoid}

The 'page-break-after' property not yet well supported, at least with the value 'avoid' but this is no reason not to use it. Support will improve in the future.

The specification also includes the property page-break-inside. This is intended to keep together associated content such as a table or div. Potentially this is an extremely useful property and overcomes one of the most annoying and spoiling features of printed pages. It is unfortunately even less well supported than page-break-after but the same comment applies.

Getting results

The right order

Having set up printer style sheets as described, all should be well but there are a few precautions to take.

Normally there will be two sets of styles, one for printed media, one for all media. If the two sets were for printed media and screen media no ambiguity could result but there are good reasons to avoid this approach:

• Visitors using other media would be completely disenfranchised.
• Both style sheets would have to be comprehensive, this would lead to more development and more maintenance.

Instead of this, it is normal to use a style sheet covering all media and a separate one for print media which includes only a few styles – those few that need to be different for print.

The specifications that control the cascading order for styles dictate that the later encountered style rules override those encountered earlier. Thus, if the rules for print media are read first, followed by those for all media, the latter will prevail and the print media rules will be ignored. It is therefore important that the link to the print style sheet should appear after that to the normal style sheet.

Inline styles

As a general rule, styles for print media cannot be applied using inline styles. Possible exceptions are the page-break properties. These apply only to paged media and are therefore meaningless and will be ignored by screen and most other devices, however both print and projection are paged media so may require different breaks.

The cascading rules dictate that inline styles have precedence over all others. Authors will probably use inline styles sparingly and, other than the above, should certainly avoid specifying any styles which do not apply to all media. Inline style declarations will override any print styles so any which could give problems must be avoided.