Controlling Page Breaks

Browsers can show very long pages in a single window thanks to the scroll bar. When visitors go to print a page, the contents of particularly long pages must be divided to fit on a given paper size. CSS lets you control where those page breaks should occur.

To control page breaks before elements:

In the style rule, type page-break-before: when or page-break-after:when, where when is one of always (so that page breaks always occur before/after the selected elements), avoid (so that page breaks only occur before/after the selected elements when absolutely necessary), or auto (to let the browser decide).

To keep elements from being divided between two pages:

In the style rule, type page-break-inside: avoid.

Tips

• The page-break-before and page-break-after properties theoretically accept values of left and right (to make pages start on the left or right side, respectively), but those values are currently not supported on any browser.

• The default value for all of the page break properties is auto. Only page-break-inside is inherited.

• Currently, page-break-before and -after elements are supported by IE, Firefox, and Opera, though Explorer and Firefox don't understand the avoid value. Only Opera understands page-break-inside.

Figure 14.5. I don't want paragraphs to be divided between pages so I use page-break-inside:avoid. So that each second level header starts on its own page, I add page-break-before:always to the h2 tags.

Figure 14.6. By putting a page break before each h2 element (like The Storm), I ensure that they start on a a fresh page. Notice also the extra space at the bottom of the page since the paragraph that followed was too big to fit in its entirety (and "inside page breaks" were to be avoided). Instead the entire next paragraph will be printed in full on the following page.