Page Breaks

The term page has two meanings on the Web: It's an informal term for a document (a "Web page"), and it refers to sheets of paper that come out of the printer when you print a document. In this chapter, "page" always refers to the latter of the two.

One of the most common complaints people have when printing from the Web is that page breaks appear in the wrong places and don't appear in the right places! For example, a page break should not normally occur immediately after a heading. Instead, the page should be broken before the heading so that the heading occurs on the top of the next page. This way, the heading and the first paragraph, which logically belong together, remain together visually as well.

Similarly, a single line of a paragraph should never be left alone at the bottom or top of a page. Typographers refer to these as "orphans" and "widows," respectively, and avoid them like the plague. The traditional remedy is to make sure that at least two lines always remain together on the same page. Figure 12.1 shows these common page-break mistakes.

Figure 12.1. Some of the most common page-break mistakes.

CSS2 has five properties for controlling page breaks: page-break-before, page-break-after, page-break-inside, widows, and orphans.

Name:	page-break-before
Value:	auto | always | avoid | left | right
Initial:	auto
Applies to:	all elements
Inherited:	no
Percentages:	N/A

This property indicates if there should or should not be a page break before the element. For example, if each H1 element in a document is a chapter heading, you might want to force a page break before the element. This is easily done with the page-break-before property:

 H1 { page-break-before: always } 

The left and right values indicate that there should be a page break before the element, and that the element should end up on the left or right page, respectively. (A "left" page is a page that ends up on the left side of the fold when the pages are bound to a book; vice versa for "right" pages.) For example, it's common for all chapters to start on the right page, which can be achieved with this rule:

 H1 { page-break-before: right } 

Lists, on the other hand, should never start at the top of a page. This can be avoided with this rule:

 UL, OL, DL { page-break-before: avoid } 

Because cases can arise when the browser isn't able to fulfill this request, the keyword is "avoid" rather than "never." This is true for all properties related to page breaks: They indicate preferences, but there is no guarantee that the wish can be granted. The reason is that the problem is "overconstrained" the style sheet specifies too many wishes and not all of them can be granted. For example, consider this document, which only contains lists with one list item each (unlikely, but possible):

 <UL>   <LI>item</LI> </UL> <UL>   <LI>item</LI> </UL> <UL>   <LI>item</LI> </UL> ... 

Given enough lists like this one, the browser will have to break the page at some point, and because the document contains only lists, one of them will end up on top of the page.

The auto value on page-break-before indicates that browsers should behave as they always have: breaking pages when they have to because no more space is left on the page.

Name:	page-break-after
Value:	auto | always | avoid | left | right
Initial:	auto
Applies to:	block-level elements
Inherited:	no
Percentages:	N/A

The page-break-after property takes the same values as page-break-before. In fact, the two properties are almost identical with the important exception that one of them indicates page breaks before an element and the other indicates page breaks after the element. So, a value of left means that the next element will end up as the first element on the next left page.

A typical use of this property is to declare that page breaks should not occur after heading elements:

 H1, H2, H3, H4 { page-break-after: avoid } 

This rule is part of the default style sheet for HTML documents and authors should, therefore, not have to set it in their own style sheets.

Name:	page-break-inside
Value:	avoid | auto
Initial:	auto
Applies to:	block-level elements
Inherited:	no
Percentages:	N/A

The page-break-inside property indicates if a page break can or can't occur within an element. For example, this rule tells all items of a list to remain on the same page:

 UL, OL, DL { page-break-inside: avoid } 

A problem arises when a list has too many items to fit on a single page. In these cases, the avoid value cannot be honored and the list has to be broken when the page is filled. Conceivably, the browser could honor the avoid value by reducing the font size. Because this would quickly make documents illegible, CSS chooses to honor font-size instead of page-break-inside when a conflict occurs.

Name:	widows
Value:	<integer>
Initial:	2
Applies to:	block-level elements
Inherited:	yes
Percentages:	N/A

Widows is a typographical term for isolated lines at the top of the page. For example, if a page break occurs within a paragraph, the lines which end up on top of the second page are called widow lines (refer to Figure 12.1). The value on this property specifies the minimum number of widow lines that can appear together. The value 2 is a common value on this property common enough to be the initial value.

Name:	orphans
Value:	<integer>
Initial:	2
Applies to:	block-level elements
Inherited:	yes
Percentages:	N/A

Orphans is a typographical term for isolated lines at the bottom of a page. When a page break occurs within a paragraph, the lines which end up on the bottom of the page (the first lines of the paragraph) are called orphan lines (refer Figure 12.1). The value on this property sets the minimum number of orphan lines that must appear together. As with widows, 2 is a common value, as well as the initial value, and authors seldom have to change it.

Use of Page Break Properties

As a designer, you seldom have to set values on the properties previously described. For orphans and widows, the initial value is two lines and this works well for most documents; they rarely have to be changed. The other three properties (page-break-before, page-break-after, and page-break-inside) don't have equally universal initial values, but the HTML default style sheet contains the most common settings. For example, this is what it says about headings:

 H1, H2, H3, H4, H5, H6 {   page-break-after: avoid;   page-break-inside: avoid; } 

So, browsers will try to avoid page breaks after heading elements, thus eliminating some of the problems in Figure 12.1. To eliminate the page break before the list, this rule is also found in the default style sheet:

 UL, OL, DL { page-break-before: avoid } 

So, after eliminating page breaks after headings, page breaks before lists, widows and orphans, the sample page now looks like what's shown in Figure 12.2.

Figure 12.2. The most common mistakes have been corrected. (Compare with Figure 12.1.)