Introduction
Web authors often use CSS to make their sites look impressive on the screen, but forget to create stylesheets for other common media types—print, audio, and small screen handheld devices. Printed media is one of the types which really shouldn’t be overlooked, because if people like your site, they may want to print it off, and it’s in your best interests to make the printout attractive and readable.
This article covers some useful techniques for creating stylesheets for paged media. It will help you get your site looking good on paper, and will avoid the need to create separate “printer friendly” versions of your pages.
Simple Styling
When designing for print, it is best to avoid creating complex layouts. Particularly, you should steer clear of using floats and fixed positioning. If you are using semantic markup (which you likely are if you are using CSS), then there is generally very little you need to do to style your markup for printing—most of it will be optimisations and workarounds for things which can’t be represented on paper.
You should also avoid coloured backgrounds or background images (web browsers tend to avoid printing these anyway), and stick to more ink friendly presentation methods such as borders and margins.
Suitable Fonts
Choosing a font is down to personal taste, but printing is usually done using a serif font with a point size of 12.
body
{
font-family: "Nimbus Roman No9 L", "Times New Roman", serif;
font-size: 12pt;
}
p
{
text-align: justify;
}For screen media, you are usually discouraged from using point sizes for fonts due the the wide variations in screen sizes and resolutions. For printouts it’s reasonable to assume it will be done on A4 paper, so using point sizes is the best way to ensure consistency.
Unnecessary Content
You can remove any content which isn’t needed from the printed version by setting its display property to “none”. Unnecessary content will generally include interactive components which make no sense on paper, such as navigation menus and HTML forms.
#navigation, form
{
display: none;
}This would prevent the element with the id of “navigation”, and any HTML forms from being displayed. Note that this is different from setting the visibility to “hidden”, because hidden elements still take up space on the page.
HTML Links
Having HTML links on paper isn’t particularly useful, so you may prefer not to have any formatting on them. As most user agents render links coloured and underlined, you’ll need to undo this.
a
{
text-decoration: none;
color: #000000;
}From a printed page, it’s not possible to know where a link points. With the help of some CSS 3 selectors, it’s possible to add the information to the printed page.
a[href^="http://"]:after, a[href^="ftp://"]:after
{
content: " (" attr(href) ")";
font-size: 10pt;
}This rule states that anchors which have an href attribute beginning with “http://” or “ftp://” (you may want to include other URI schemes too), should be followed by the URL in brackets. You may also want to set the font to be a bit smaller, as I have done in this example.
Abbreviations
Some user agents render “<abbr>” and “<acronym>” elements with a border below them if they possess a “title” attribute. You may wish to remove this border, and also render the content of the “title” attribute on the printed page. This is done in a similar way to the HTML anchor example.
abbr, acronym
{
border: 0;
}
abbr[title]:after, acronym[title]:after
{
content: " (" attr(title) ")";
font-size: 10pt;
}Page Breaks
It is often useful on printed media to specify where page breaks should and shouldn’t occur. CSS provides three useful properties for specifying page break behaviour—“page-break-before”, “page-break-after”, and “page-break-inside”. Although browser support for these properties isn’t great (Opera being the exception), it is still a good idea to make use of them.
// Put tables on their own page.
table
{
page-break-before: always;
page-break-after: always;
}
// Avoid page breaks straight after a heading.
h1, h2, h3, h4, h5, h6
{
page-break-after: avoid;
}
/* Avoid page breaks inside paragraphs, blockquotes, lists, and preformatted
text. */
p, blockquote, ul, ol, dl, pre
{
page-break-inside: avoid;
}Remember to be thoughtful when setting a page break property to “always”, because you don’t want to waste your visitors’ paper by printing lots of pages with very few lines of text on them!
The “page-break-after” property can be set to “avoid” on headings, in order to prevent them from appearing on their own at the bottom of a page. The heading will then appear at the top of the next page, where it will presumably be followed by some content related to that heading.
Avoiding page breaks inside elements is very useful for preventing block elements from breaking over a page. If an element is too long to fit on a page, it will be moved to the next page.
HTML Tables
When creating HTML tables, they should be marked up with “<thead>”, “<tbody>”, and where appropriate, “<tfoot>” elements. This allows the headers and footers of the table to be included on each section of the table if it breaks over a page.
<table summary="Suitable summary.">
<caption>Suitable Caption</caption>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>Associating A Print Stylesheet With A Page
Whilst it is possible to use a single stylesheet with “@media” rules for different media types, I would recommend keeping each stylesheet in a separate file. The two most common ways of associating stylesheets with HTML documents, is though the use of “<link>” or “<style>” elements, with the “media” attribute set to the appropriate type.
Using “<link>” elements:
<!-- Document Head -->
<link rel="stylesheet" type="text/css" media="screen" href="/css/mystyle.css"
title="My Style">
<link rel="stylesheet" type="text/css" media="screen" href="/css/mystyle2.css"
title="My Alternate Style">
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css">Using “<style>” elements:
<!-- Document Head -->
<style type="text/css" media="screen" title="My Style">
@import url("/css/mystyle.css");
</style>
<style type="text/css" media="screen" title="My Alternate Style">
@import url("/css/mystyle2.css");
</style>
<style type="text/css" media="print">
@import url("/css/print.css");
</style>Stylesheets can also be associated with HTML documents using the HTTP “Link” header, although this isn’t widely supported.
In XML documents (for example WAP pages using XHTML-MP), external stylesheets can be referenced with an “xml-stylesheet” processing instruction (see Associating Style Sheets with XML documents). This must be placed in the XML prologue, i.e. after the XML declaration but before the document element.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" media="screen" href="/css/mystyle.css"
title="My Style"?>
<?xml-stylesheet type="text/css" media="screen" href="/css/mystyle2.css"
title="My Alternate Style"?>
<?xml-stylesheet type="text/css" media="print" href="/css/print.css"?>
<MyDocument/>Note that I have made the print stylesheet persistent in these examples, by not giving it a title attribute. This is because I have never found the need to have more than one print stylesheet. The use of persistent, preferred, and alternate stylesheets is covered in the W3C technical report, entitled Style Sheets In HTML Documents.
Get creating!
Whilst browser support for some paged media CSS rules is a little weak, by following the tips in this editorial, you should be able to make massive improvements in the quality of printed versions of your pages.
The best thing to do when designing print stylesheets, is to compare a print preview of your page across several different browsers. It then shouldn’t take a lot of effort to create impressive looking printed versions of your pages. If you need somewhere to start, take a look through the source code of this page, and look at its stylesheets.