Breaking Pages

As we've seen over the past few weeks, a large part of printing in the Cascading Style Sheets 2 standard involves layout and formatting control. No discussion of printing is complete, however, without coverage of page breaks.

Creating Page Breaks

The normal CSS2 printing model flows the contents of your document into your printed pages, filling one page and then moving on to the next. The browser maps these logical pages to physical sheets and sends them to a printing device specified by the user. Without your intervention, the only page breaks that occur are those that naturally fall between consecutive pages of output.

The CSS2 model recognizes that you may often want to force a page break in certain parts of your document. To support this feature, it provides two style properties, page-break-before and page-break-after, that let you create page breaks before and after elements in your document.

Both of these properties accept one of four keyword values:

auto

Using this value lets the browser make the call, inserting a page break if necessitated by the output process, and leaving well enough alone otherwise. In general, you probably won't use this value much, since it mimics the default behavior of the browser as it prints your document.

always

As you might expect, this value forces a page break before (or after, depending on the property you used it with) the affected element is printed. You would use this value wherever you want to force a page break. You might assign it to every <h1> tag in your document, forcing a new page at each major new section in your document, or you might associate it with a specific paragraph or division that you know must begin on a new page.

left

This value, like always, forces a page break. Unlike always, using left ensures that the new page will be a left-hand page. Depending on the current page, the browser may print a blank page to force the next printed page to be a left-hand page.

right

Using right forces a page break, but ensures that the next page is a right-hand page. Again, an extra blank page may be printed to make sure your output shows up on the right page.

Avoiding page breaks

For as many times as you may want to force a page break, there will be occasions where you will want to suppress them as well. To help you in these situations, CSS2 provides the page-break-inside property, as well as an additional value, avoid, that can be used with the page-break-before, page-break-after, and page-break-inside properties.

The page-break-inside property accepts the auto and avoid keyword values. As with the other page break properties, the auto value leaves page breaks up to the browser. The avoid value prevents the affected element from being split across two pages if possible. The browser may choose to shift the element to the next page to keep it intact, or may adjust spacing on the current page to fit the element in.

If you use the avoid value with the page-break-before and page-break-after properties, it will suppress a page break that would otherwise occur before or after the affected element. The net effect is that the current element is kept on the same page as the preceding or subsequent element. For example, to ensure that the first paragraph following a header is kept with the header, you could say:

     H1 { page-break-after : avoid }

With this property, page breaks would be adjusted so that each <h1> element and the following element were on the same page.

This concludes our tour of CSS2 printing features. Although very few of these features have surfaced in the current crop of browsers, you can be sure that you will eventually be able to take advantage of them in future versions. The long-awaited capability to control HTML printing is almost upon us.

Next: Defining CSS Media Types

Chuck is the author of the best-selling HTML: The Definitive Guide and now, the fourth and expanded edition, HTML & XHTML: The Definitive Guide. He also writes on a variety of Internet and Web-related topics for a number of online magazines.

Previously in Tag of the Week

CSS2 Standard Tour: Begin Here
Attribute Sectors in One Quick Bite
Print This!
Using CSS2 to Layout HTML Pages for Print
CSS2 Printing: Left and Right Layouts
Even More CSS2 Printing Power

Of related interest: See the Web Review Style Guide, edited by Eric Meyer.