CSS : Print - [8] Introduction

If you were to try to print out a web page exactly as it appears on your screen, chances are you would end up wasting a lot of ink and paper printing unnecessary page elements, or worse yet, the content you printed would be illegible.

That's why links to "printer-friendly" versions of web pages are all over the Internet, especially on news and business sites. When you click this kind of link, you are given a web page design or shell that contains the same text as what you see on your screen, but in a minimal version that is, well, friendlier (or easier) to print.

To create this printer-friendly version of the text, you traditionally would either have to manually convert the web page content to a new, stripped-down page, or use a script dynamically to generate a separate page design. With CSS, however, you can "automagically" redesign documents when they are printed, thereby eliminating the need to code a separate, printer-friendly version as well as saving on server resources typically required to generate the page.

Support for print-media CSS is fairly commonplace these days. Currently, the browsers that support this aspect of the technology include Internet Explorer 4+ for Windows, Internet Explorer 4.5+ for Macintosh, Navigator 6+, Safari, and Opera.

There are print-only properties associated with CSS. However, these properties have limited support among the browsers on the market; Opera 5 and 7 are the only browsers that support more than two of these kinds of properties (15 printing properties out of the 16 in the specification). Because of this reality and the nature of this book to focus on practical, cross-browser nature of CSS, the recipes in this chapter are geared to styling the contents of the page rather than dealing with the theory of CSS printing properties. For more information on CSS printing properties, see Chapter 14 of Cascading Style Sheets: The Definitive Guide (O'Reilly).

This chapter teaches the basics of how to tell the browser which style sheet to use when sending a document to print. It also discusses how to switch graphics from web to print CSS, as well as how to develop a document for printing.

CSS : Print - [8.1] Creating a Printer-Friendly Page

Problem

You want to create a printer-friendly page without having to manually or dynamically generate another web page.

Solution

Create a separate style sheet that dictates how a page looks when printed. Then associate the style sheet and set the media property to print:

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

media="screen">

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

 media="print">

If you're writing a web page in valid XHTML, you need to include a space and a forward slash before the closing bracket at the end of an empty element such as link:

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

media="screen" />

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

media="print" />

Discussion

You can use style sheets to dictate the presentation of documents in a wide range of media. By default, the value for the media attribute is all. Without the attribute, the user agent will apply the CSS rules in the style sheet to all media.

Although the most common attribute you probably have encountered is screen, which is used mainly for displaying documents on color monitors, the CSS 2.1 specification actually defines a total of ten media types, as shown in Table 8-1.

Table 8-1. Media types for CSS

CSS : Print - [8.2] Making a Web Form Print-Ready

Problem

You need to have a form that users can fill out online, or that they can print and then fill out offline, as shown in Figure 8-1.

Figure 8-1. An online form

Solution

First, create a print media style sheet and a class selector that transforms the form elements so that they display black text and feature a one-pixel border on the bottom. For example, the following HTML code for an input text element:

<label for="fname">First Name</label>

<input class="fillout" name="fname" type="text" id="fname" />

requires the following CSS rule:

<style type="text/css" media="print ">

.fillout {

 color: black;

 border-width: 0;

 border: 1px solid #000;

 width: 300pt;

}

</style>

For drop-down menus, hide the select element altogether and add some additional markup to help produce the bottom border:

<label for="bitem">Breakfast Item</label>

<select name="bitem" size="1">

 <option selected="selected">Select</option>

 <option>Milk</option>

 <option>Eggs</option>

 <option>Orange Juice</option>

 <option>Newspaper</option>

 </select><span class="postselect">  </span>

CSS : Print - [8.3] Inserting URLs After Links

Problem

You need to display URLs of links in an article when a web page is printed.

Solution

Instruct the browser to print the URLs of links in a paragraph by using the :after pseudo-element:

p a:after {

 content: " <" attr(href) "> " ;

}

Discussion

Selector constructs such as :after are known as pseudo-elements. The browser interprets the selector as though additional elements were used to mark up the web document.

For example, by using the following CSS, you can make the first letter of a paragraph two-em units in size:

p:first-letter {

 font-size: 2em;

}

You use the :after selector (or the :before selector) to insert generated content after (or before) an element. In this Recipe, the value of the href attribute, which contains the URL information, is placed after every anchor element in a p element.

To have brackets appear around the URL, place the quotes around the brackets. To add a buffer of space between the anchor element and the next inline content, put one space in front of the left bracket and one after the right bracket, then insert the URL using the attr(x) function. Whatever attribute is replaced for x, CSS finds the attribute in the element, returning its value as a string.

Another example of the power of this pseudo-element involves returning the value of abbreviations and acronyms in a buzzword-laden document. To accomplish this, first put the expanded form of the word or phrase in the title attribute for abbr or acronym:

<p>The <acronym title="World Wide Web Consortium">W3C</a> 

makes  wonderful things like <abbr title="Cascading Style 

Sheets">CSS</abbr>!</p>

Then, in the CSS rules, tell the browser to return the value for the title attribute:

abbr:after, acronym:after {

 content: " (" attr(title) ") ";   

}

Currently, generating content through pseudo-elements works only in Netscape 6+, Mozilla, and Safari browsers.

CSS : Print - [8.4] Sample Design: A Printer-Friendly Page with CSS

In this sample design, you will transform an existing web document (as shown in Figure 8-3) to make it more suitable for print. Although CSS has changed the way we design for the Web, it also has allowed developers to change the way they provide printer-friendly versions of their documents. Instead of having to create separate pages or write scripts, you can use CSS to create a printer-friendly document as soon as the user hits the Print button. The HTML for the page isn't in the book because the miracle of CSS lets us change the presentation without having to change the HTML.

Figure 8-3. Web page stylized for screen delivery

When creating a style sheet for print, you actually use a web browser. This enables you to see quickly how the CSS rules affect the display of the document (just like for media delivery), but it's also easier on the environment and you save money by not wasting ink in the printer. So, comment out the style sheet used for the screen in order to create new CSS rules:

<!-- Hide screen media CSS while working on print CSS -->

<!-- link href="adv.css" type="text/css" rel="stylesheet" 

media="screen" -->

<style type="text/css">

/* Print CSS rules go here */

</style>

Setting the Page for Black-and-White Printing

Apply the first CSS rule to the body element. In this rule, set the background color to white and set the type to black:

body {

 background-color: white;

 color: black;

}

Next, set the typeface for the page to a serif font. Reading text online in sans-serif is easier on the eyes, but in print media the serif font is still the choice for reading passages of text. For a later fallback choice, you might want to go with the Times typeface for print documents since it's installed on most (if not all) computers, and it's a workhorse of a font. In case your users don't have Times installed, supply alternatives as well:

body {

 background-color: white;

 color: black;

 font-family: Garamond, Times, "Times New Roman", serif;

}