How to make an effective print style sheet?


It might have often happened to you that you read an interesting article while navigating the web but, for a reason or another, you had to leave from the pc. One way to continue reading is that of printing the article in question. Although today people print web pages less frequently, when they do it, that’s for satisfying a real need.

A reader might have an important meeting and decide to print a few copies of the latest press agencies; often me myself print articles of various blogs I follow to read before I go to bed, or during my frequent trips on train. For whatever reason a web page is printed, if attention is not paid for this particular means on behalf of the developer, the results will be, in the best of cases, poor.

In this article we will see some of the best practices for an optimal printing of the contents of our website.

Setting up a CSS file for print

In the prehistory of Internet for printing a page one resorted to a link tagged “Print this page” which headed for another version of the page at issue, optimized for printing. This naturally led to redoubling the dimensions of the website, having to foresee two copies of the same page.

Today, thanks to the powerful management of the CSS print styles this technique is no longer used, in favor of more flexible methods. In fact the CSS specifications foresee three methods for setting up the print style sheets:

  1. Through the link tag and the “media” attribute.
  2. Through the @import rule.
  3. Through the @media rule.

Let’s examine these methods one by one.

First method: The <link>tag

Probably the most common method for attaching a style sheet to a HTML document is exactly the link tag. Three attributes are usually indicated with this tag:

  1. rel: to indicate the nature of the relation between the current document and the attached one;
  2. type: to indicate the mime type of the attached document;
  3. href: which indicates the URI of the file.

The syntax is the following:

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

There’s another attribute which can be omitted and that’s the “media” attribute, which indicates exactly on which devices the style sheet has to be applied. The predefined value for this attribute is “all”, thus the previous code has the same value of that stated below:

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

There are different kinds of media types, but what interests us the most for the scope of this article is obviously “print”. This is how to define it within our document:

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

In this way the display of the website on whatever device will use the generic style sheet, while for the print the specific one will be used.

Obviously this method foresees that we can access the HTML file and modify it (often in the companies this is not possible, given that there’s a rigid division between the back-end code and the interface code).

Here’s finally worth making a remark about: every style sheet added through the link tag represents a further HTTP request, which will therefore weigh on our server, in case of a high-traffic website. Such inconveniences can be resolved by using one of the other methods quoted above. It must be said that the use of the link tag is however the only way to filter Internet Explorer using the conditional comments.

Second method: @import rule

The second method for setting up a print style sheet makes use of the @import rule. Such a rule goes inserted inside a CSS file already attached to the document through the “link”  tag or in a CSS block inside the HTML file.

An example could be more useful. The style sheet is attached without specifying the media type:

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

and the @import rule is inserted into the attached file:

/**
* file general_style_sheet.css
*/
@import url("print_style_sheet.css") print;

Unfortunately Internet Explorer does not support print style sheets declared through the @import rule, therefore the use of this technique is not advisable (unless the IE users for your website make up an unimportant percentage).

Third method: @media rule

The last method to be examined is the @media rule which unifies the minor aspects of the two previous techniques, in fact it allows inserting all CSS  rules in a single file, limiting the number of HTTP requests, without giving up the style sheet organization.

The usage is very simple: a single style sheet is attached, through the “link” tag:

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

Inside it are inserted the @media declarations, one for each media type:

/**
* file general_style_sheet.css
*/
@media print {

	/* css rules for print */

}

@media screen {

	/* css rules for screen */
}

This is the method I prefer, because it allows me to minimize interventions to the HTML code and requests to the server, guaranteeing speed and lightness for my websites.

What should I insert in my print style sheet?

Unfortunately there is no “universal print style sheet”, since like in the design on screen, every website is particular. There are, anyway a series of rules it is possible to follow adapting them to the project in process. Let’s have a look at them together.

Eliminating all the interactive elements

When it is conceived for printing you have to consider that all elements with which users are used to interact lose their significance: it makes no sense in fact to print links, navigation bar, banners or lateral bars. All that is of interest is the contents, therefore text and images.

It is useful therefore to hide all the elements of the page which are not needed once printed; to do so the “display” rule can be used, set up on the “none” value. Let’s see an example:

/**
* file general_style_sheet.css
*/
@media print {
	#top_nav, #sidebar, #advertising { display:none; }

}

Besides you need not consider the background images set up through the style sheet, as all the default browsers avoid printing them, with the only exception of Opera. So, if your website receives many visits incoming from this browser, you can take into account adding a similar rule (to the elements with a background image) on your print style sheet: background-image:none;

For example:

/**
* file general_style_sheet.css
*/
@media print {
	#top_nav, #sidebar, #advertising { display:none; }

	body { background-image: none; }

}

Given that the links cannot be clicked it makes no longer sense they are highlighted compared to the rest of the text: it could therefore be a good idea to eliminate the underlining inserted by default from the browsers (or any other style inserted in our CSS):

@media print {
	...
	body a:link, body a:visited {
		text-decoration:none;
		/*  cancel the other styles
			inserted in our CSS */
	}
	...
}

In this way the links will be made as simple text, even if in the printed page there is a loss of information. In fact, in the act of printing the address of the link is lost: we can fix this problem exploiting the “:after” pseudo selector, as explained in the third lesson of the guide to the selectors:

@media print {
	...
	body a:after {
	  content: " (" attr(href) ") ";
	}
	...
}

Restoring the positioning of all the elements

An important issue to keep in consideration for the print CSS is that the float rules and the absolute positioning can “cut” some parts of the page, rendering them in fact non-printable. To prevent this from happening, it is sufficient to set up the predefined behavior for all elements of the page as shown below:

@media print {
	body, h1, h2, div, ol, ul {
		float:none;
		margin:0;
		padding:0;
		position:static;
	}
}

Utilizing a suitable font for the reading on paper

For improving the legibility of the printing, you might think of using serif fonts: in fact the final ornaments present in the letters of this family allow the reader to easily distinguish one letter from the other, guaranteeing a higher speed of reading compared to the opposite of “serif”.

Therefore we also add the font-family property to set up the font:

@media print {
	body, h1, h2, div, ol, ul {
		float:none;
		font-family: Georgia, "Times New Roman", Times, serif;
		margin:0;
		padding:0;
		position:static;
	}
}

In the previous example I set up three different families of serif fonts, which have a good percentage of being present in the computers of all visitors.

Utilizing the right instruments: the web developer toolbar

The Firefox extension: “Web developer Toolbar”, contains (among other things) a comfortable functionality to work on the print style sheets: under the “CSS” menu enough selecting “Show CSS for media type” and select “For print”.

In this way you can avoid having to open the print preview to display the progress made in our work.

Remarks

Obviously the “rules” that were just exposed are very generic and are to be  integrated with others made “ad hoc” for the website at issue, and, in a certain sense, be pleased with the results, as in printing the precision and control we are used to on the screen cannot be obtained. And you, have you ever had experiences in the creation of print style sheets?

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: ,

The Author

Fond of web design, takes delight in creating (X)HTML+CSS layouts. A maniac of polished and tidy codes, the type of person you find in your house straightening the paintings hanging on the wall. He has made his mind of becoming a web designer with a capital “w”, and spends entire nights awake in order to make his dream come true.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

5 comments

Trackback e pingback

  1. Tweets that mention How to make an effective print style sheet? | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by Antonino Scarfì. Antonino Scarfì said: RT @YIW How to make an effective …
  2. Tweets that mention How to make an effective print style sheet? | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by Stewart Griffiths. Stewart Griffiths said: How to make an effective print style …
  3. Resources - Tweets of the Week (5.10.10 - 5.14.10) | Think Design
    [...] have a great weekend!   Weekly Smashing Web Design Inspiration No. 18 From @Designrfix   How to make …

Leave a Reply

Current month ye@r day *