CSS for print tutorial

Draft

This article or section is currently under construction

In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")

<pageby nominor="false" comments="false"/>

Introduction

Learning goals

• Be able to style text-centric HTML pages (e.g. articles, tutorials, novels)

Prerequisites

• CSS tutorial
• Font readability
• CSS text styling tutorial
• CSS media and alternative style sheets tutorial

Level and target population

• Beginners

Teaching materials

• Example text: http://tecfa.unige.ch/guides/css/ex/just-so-stories-print.html

Remarks

• This tutorial is intended for students in educational technology or any other field that is technology intensive. For people who need less, there exist many easy CSS tutorials on the web. This text is intended for students who also must learn principles and who are willing to learn CSS by doing a project, looking at CSS code and online reference manuals.
• Ideally, a teacher also should assign a text formatting task, during or before assigning this tutorial for reading).

Linking stylesheet for printing

As explained in the CSS media and alternative style sheets tutorial, there are three ways for defining alternative styles:

(1) Use @media rules in a stylesheet

@media print body {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 1em;
	color: #333333;
	margin-top: 2cm;
	margin-right: 2cm;
	margin-bottom: 1.5cm;
	margin-left: 2cm
        }

(2) Define an alternative stylesheet in the HTML

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

(3) Define an alternative stylesheet in the CSS

The @import at-rule allows to specify a media type, i.e. you may use this strategy to load various CSS variants from a single CSS file or within a HTML script section.

Inside a CSS file:

@import url(print-style.css) print;

Inside an HTML file

<style type="text/css">
@import url(print-style.css) print;
</style>

Adapt style for printing

Most often, you will have to do the following:

(1) Remove unwanted items, e.g.

 #navigation, .do-not-print, #menu {display:none}

Of course, you will have to adapt this to your CSS. #navigation is an example of an element ID and .do-not-print and example of a class.

(2) Contents should not float in general and width should be 100% or auto

(3) Contrasts should be optimized for a printer. E.g. text should be black and the background should be white, or at least print ok on a printer with grey levels.

Simple minimal example taken from CSS Design: Going to Print by Eric Meyer, May 2002:

body { background: white; }

#menu { display: none; }
 
#wrapper, #content {
 width: auto;
 border: 0;
 margin: 0 5%;
 padding: 0;
 float: none !important;
 }