Specifying page breaks for
printing using CSS

With CSS (level 2), the grip webmasters have over their webpages
extends to the printer. To satisfy the controlling tendencies within us,
IE5+ and Firefox/ NS6+ give you the power to insert artificial page breaks for
printing. Now your site can look the way you want it to even after the
computer's turned off!

page-break-before and page-break-after

Here are your two boys for getting the job done- the CSS attributes
page-break-before and
page-break-after. Both instruct the printer to begin printing a new
page, with the difference being before or following the element the
attribute is applied to. The possible values the two attributes accept
are:

Value

Description

always

Always insert a page break

auto

Default value. Insert page break only if at end of
page.

"" (empty string)

Do not insert a page break.

Let's say your page consists of multiple headers (with content
following each). Want to divide each header into a separate page for
printing?

<style type="text/css">
h1{
page-break-before: always;
}
</style>

How about getting even more personal, and divvying things up at
specific location(s)?

Note that page-break-after may
not work with <BR> or <HR> tag in some browsers.

Their scripting equivalents-
pageBreakBefore
and pageBreakAfter

As with most CSS attributes, you can access our two stars via
JavaScript, by using the properties
pageBreakBefore and
pageBreakAfter. The obvious advantage
of this is the ability to then dynamically assign their values. For
example, instead of forcing custom page breaks on your visitors, you can
create a script to make this optional. Here I'll create a checkbox that
toggles between slicing the page at the headers (h2) and at the printer's
own discretion (default):