COM271, Week 5

Controlling Page Breaks in Print Media

Syllabus | Table of Pages | Assignments | References and Useful Links

Eric Meyer's 3rd edition CSS: The Definitive Guide, from the O'Reilly series (O'Reilly Media, 2006. 544 p.), is still my first choice of CSS Guides. As texts for this course, I chose Eric Meyer on CSS and More Eric Meyer on CSS; these are hands-on-training guides for learning through project practice. Meyer's O'Reilly book is a reference, going through CSS attributes and demonstrating their use with good examples. The chapter "Non-screen Media" is particularly useful. I draw the following from it.

Unlike the continuous scrolling of the screen, print media requires clear instructions for page breaking. The attributes page-break-before and page-break-after are used for this; they both take values auto, always, avoid, left, and right. Auto is the default behavior; no specific break occurs before or after an element. Always forces a break before or after the element. Left and Right force the printer to skip to the next left or right-facing page for back-to-back paging.

On pages (such as this one) where it is likely that users will be interested in a print style sheet (i.e., students are encouraged to "print the notes" to prepare for class), frequent use would be made of simple styles such as

.pba{page-break-after:always;}
.pb{page-break-before;always;}

These two classes would allow manually forcing breaks, a styling that would be added by a web author after a document had reached a final draft form which allowed the author to consider print media.

<p class="pba">...which is why we reached these conclusions.</p>
<h1 class="chapterhead pb">New Beginnings</h>

Notice that more than one class may be included as the value paired with the html class attribute. The class pb would not be a screen style and would thus be ignored.

Widows and Orphans: Print media attempts to fill pages, and this frequently involves breaking paragraphs. In CSS, the attributes widows and orphans are defined in CSS2 to allow browsers to implement these concepts.

p{widows:4;orphans:3;}

Page breaks in long block elements: Tables, long paragraphs, and large images require planning for print media. Browsers do not provide clear and consistent treatment of parts of pages that overflow the print area. If your entire page is laid out within a positioning table, for example, some browsers will see the table as a block element and attempt to avoid breaks within the block; the printed table will overflow the bottom of the first page of print, and there may be no second page. Similarly, elements which would overflow the width of the table are treated without clear or consistent treatment. Some browsers will clip the content, but others will print additional pages to "complete" the wide page; neither is satisfactory.

The attribute page-break-inside can take values auto and avoid.
table{page-break-inside:auto;}
but this presumes that a browser will recognize and permit tables to be broken for print media; this is not universal practice, unfortunately.

Best practice" For print-focused pages, begin with a commitment to minimizing the length (="height") of content-laden block elements. Certainly, stop using tables to contain layout. Don't imagine that page-break-inside is going to unlock this for you (see box above). If you must use tables (for legitimate structural reasons), break them into smaller tables (or, end the table and begin a new table with a screen-display-none header at points where pages will break). This is particularly acute when page content is of indeterminate length (such as multiple rows of information from a database).

Similarly, divs used to highlight (indenting, borders) lengthy content needed to be broken up and planned carefully. It may feel like a waste, but it is often best to leave significant white-space on a print page so that content can be completely displayed on a subsequent sheet of paper.

Remember to account for page elements that may have been displaced on the screen through use of floats or negative margins (say, moving a photograph stylishly out of the normal page margins to permit flow of text around the image). These will be clipped, etc., in print unless style is adjusted. Here it may be necessary to id the image or element and to create separate screen and print positioning. Alternatively, it may be necessary to provide separate images on the page, one displayed for screen, and another (perhaps smaller and in black and white) displayed only in the print version.

In all cases, a careful page by page review of the final print version is the only way to guarantee a controlled presentation of page contents in print media. Tedious? It often is (bill by the hour!). Necessary? It almost always is: But page designers who seek a quality product in browser-rendered print media will take the time at the end of the page development process to patiently review and perfect their styling for print media.