Layout for Print Media

3.9 Layout Adjustments for Printing

Preparing website content for paper is an important component of any website's design - and an attractive screen design is no hindrance to a legible and well-organized print version.

The switch between screen and printed page means changing from an interactive to a passive medium. Paper has a fixed size and proportions. Longer content areas must come to terms with page breaks - something unfamiliar in the online world. Links are no longer clickable on paper, so if the corresponding URL is not visible, important information is lost.

Printing Preparation

The headline does not quite capture the point. More accurately, you must merely decide if you want to print the content of all column containers, of some, or of only one.

The question is: which parts of the layout contain important information and what is only decoration?

The footer information, advertising in the margins, and search forms are all useless in print. The navigational elements are no longer usable on paper. It is unnecessary to print everything that appears on the screen, so for a start, the print stylesheets hide the footer and the main navigation.

Choosing the Printable Column Containers

Within the YAML framework, the order and thus the use of the column containers of content, navigation, or anything else, is variable. The print stylesheets are designed to let you freely choose any combination of column containers to be printed. You choose by linking one of the seven print stylesheets from the yaml/print/ folder in the central stylesheet of your layout.

The file print_draft.css has an exeptional position. It is a generic print stylesheet without any predefined container settings. Use this stylesheet if your layout, for example, is completely based on subtemplates.

Structure of the Print Stylesheets

The structure of these print stylesheets is nearly identical. Most of the decisions made for the printed version of a website are independent of the columns chosen for printing. All the print stylesheet must also adjust the screen layout for paper, by doing such things as hiding unnecessary layout elements, displaying URLs, abbreviations, or acronyms, so that very little information is lost.

Switching the Units of Measurement for Font Sizes

Practical font sizes are different for the screen and for paper.  Onscreen, the scalability of the type is very important, so we usually use relative units like em or percent.  For print we use absolute units like points or pica. 

Normal text should not be set at anything smaller than 10pt (10 points) to be legible on paper.  This basic font size is set for the body element and is inherited down to all child elements. 

/* (en) change font size unit to [pt] ...  */
/* (de) Wechsel der der Schriftgrößen-Maßeinheit zu [pt] ... */
body { font-size: 10pt; }

Important: switching to pt (points) is necessary for consistent print results in Firefox.  If you need to change the standard font size, do use this unit of measurement.

General Layout Adjustments

/* (en) Hide unneeded container of the screenlayout in print layout */
/* (de) Für den Druck nicht benötigte Container des Layouts abschalten */
#topnav, #nav, #search { display: none; }  

Navigation elements are generally turned off as they are useless in print.  Please note here the  #search selector.  In the basic layout, there is no predefined container for including a search form -- tastes and styles are too different to be able to provide one solution for everyone.  Of course, this element does exist in the majority of CMS-driven websites: it has been turned off here as search functionality is also not useful on paper.

Controlling page breaks

Next, we attempt to avoid page breaks immediately after a headline by using the property page-break-after:avoid. This too will help readability on paper.

/* (en) Avoid page breaks right after headings */
/* (de) Vermeidung von Seitenumbrüchen direkt nach einer Überschrift */

h1,h2,h3,h4,h5,h6 { page-break-after:avoid; }

Linearization of the Container Columns

The display of the column containers must be changed for paper. It is not practical to print them on paper next to each other as they appear on the screen. Depending on the amount of content in the various columns, unnecessary white space would be printed.

To avoid this, the container columns are linearized, or printed in the row in which they appear in the source code -- and across the entire page. The following is an excerpt from the print stylesheet print_103_draft.css. In this one, the column containers #col1 and #col3 are adjusted for the print version, and #col2 is turned off.

#col1, #col1_content { float: none; width: 100%; margin: 0; padding: 0; border: 0}
#col2 { display:none; }
#col3, #col3_content { width: 100%; margin: 0; padding: 0; border:0; }

Optional Column Labeling

Linearization is practical for printing web pages of several columns. As the left- or right-alignment disappears, the column containers must appear in the same order in which they appear in the source code.

That means that in the basic layout (column order 1-3-2), column #col3 -- which usually contains the main content -- would be printed last. As long as only this column is printed, this is irrelevant.

When several columns are printed, the hierarchy of the columns and their contextual relation to each other can be lost as a result of the linearization. To improve the user's orientation, optional headings can be added to each column container for the print layout, naming perhaps the column's position on screen or labeling its content. This is simple and elegant with the CSS 2 pseudoclass :before.

/* (en) Preparation for optional column labels */
/* (de) Vorbereitung für optionale Spaltenauszeichnung */

#col1_content:before, #col2_content:before, #col3_content:before {
  content: "";
  color:#888;
  background:inherit;
  display:block;
  font-weight:bold;
  font-size:1.5em;
}

Should a title be desired, the corresponding container need only be provided with the value for the content property.

/* Optional Column Titles | Optionale Spaltenauszeichnung */
/*
   #col1_content:before {content:" [ left | middle | right column  ]"}
   #col3_content:before {content:" [ left | middle | right column ]"}
*/ 

Note: the optional naming of the columns is predefined in all print stylesheets which print more than one column, but for safety's sake is commented out. 

Automatic Display of URLs, Acronyms and Abbreviations

As mentioned at the beginning, paper is static. Hyperlinks cannot be clicked, yet the URL should not be completely lost -- neither should explanatory text for acronyms or abbreviations.

We must ensure that these items appear on the printed page. A CSS2 pseudoclass helps us avoid this stumbling block.The additional text is printed in parentheses, URLs in brackets, each directly after the corresponding element.

/* (en) Disable link background graphics  */
/* (de) Abschalten evlt. vorhandener Hintergrundgrafiken ... */
abbr[title]:after, acronym[title]:after {
   content: '(' attr(title) ')'
}

/* (en) Enable URL output in print layout */
/* (de) Sichtbare Auszeichnung der URLs von Links */
a[href]:after {
   content:" <URL: "attr(href)">";
   color:#444;
   background:inherit;
   font-style:italic;
}

Important: the following passages from the print style sheet require CSS 2.1 pseudoclasses in the browser. Internet Explorer including Version 7 unfortunately does not meet these requirements.

These declarations allow URLs and explanatory texts to print directly after the linked text or marked abbreviation. Little information from the website is lost in the transition to paper.

Note: this option is predefined in all print stylesheets but for safety's sake is commented out.

Section 3.10: Form Construction Kit