HTML and CSS Reference
In-Depth Information
•
left
:
to place a page break where the next page will be a left page
•
right
:
to place a page break where the next page will be a right page
•
auto
:
to allow the printer to determine whether or not to insert a page break
•
inherit
:
to insert the page break style from the parent element
For example, if you wanted every
h1
heading to start a new page, you would apply
the following style rule:
h1 {
page-break-before: always;
}
Likewise, if you wanted block quotes to always appear on their own pages, you could
place a page break before and after the
blockquote
element using the following style rule:
blockquote {
page-break-before: always;
page-break-after: always;
}
Preventing a Page Break
Sometimes you want to keep printers from inserting a page break inside of an element.
This usually occurs when you have a long string of text that you don't want broken
into two pages. You can prevent printers from inserting a page break by using the style
property
page-break-inside:
type
;
where
type
is
auto
,
inherit
, or
avoid
. Thus, to prevent a block quote from appearing
on two separate pages, you could apply the following style:
blockquote {
page-break-inside: avoid;
}
Note that the
avoid
type does not guarantee that there will not be a page break
within the element. If the content of an element exceeds the dimensions of the sheet of
paper on which it's being printed, the browser will be forced to insert a page break.
Working with Widows and Orphans
Even with the three page break properties, there will be situations where a printer has
to divide the contents of an element across two pages. This can result in the presence
of widows and orphans. A
widow
occurs when only a few ending lines of an element
appear at the top of a page while the bulk of the content appears on the preceding page.
An
orphan
is just the opposite: It occurs when only a few beginning lines of an element
appear at the bottom of a page, while the bulk of the content is placed on the following
page. Leaving one or two lines stranded on a page either as a widow or an orphan makes
the material more difficult to read and is considered poor page design. To control the
appearance of widows and orphans, CSS provides the two properties
widow:
value
;
orphan:
value
;
where
value
is the number of lines that must appear within the element before a page
break can be inserted by the printer. The default value is 2, which means that the printer
can strand a widow or an orphan only if the widow or orphan includes at least two lines
of text.
You can repeat the same
element across several
pages, displaying it as a
page header or footer,
by setting its
position
property to
fixed
.
