- Getting Started
- Installation
- Key Concepts
- Integrations
- Account & Billing
- Security & Privacy
- PDF Generation
- Reference
- Tutorials
- Troubleshooting
- Excel Generation
- Reference
- Troubleshooting
Page Breaks
One of DocRaptor’s strengths is our greater intelligence behind automatic page and column breaks, especially when long tables or large graphics are used. If necessary though, you can use CSS to insert or avoid page breaks. The renderer will try to follow your settings when possible. Occasionally, the content is too large to avoid a break, or multiple break-avoiding sections are repeated next to each other.
The CSS properties break-before
, break-after
, break-inside
let you provide suggestions to the renderer, for example:
.chapter { break-before: break; }
.heading { break-after: avoid; }
section { break-inside: avoid; }
The break-before
and break-after
properties accept the following values:
-
auto
is the default value. The renderer will insert new pages as necessary. -
page
forces a page break. This is often used at the beginning of a chapter or section. -
left
orright
forces a page break and, if necessary, creates a blank page so that the content starts in the desired spread location. This is normally used with printed books, where chapters often start on the right page. -
avoid
asks the renderer not to create a new page, if possible. -
column
creates a new column (not necessarily a new page).
The break-inside
property only accepts avoid
and auto
as values.
These properties can be applied to block-level elements, table rows, and table row groups.
Widows and Orphans
Widows and orphan properties allow you to control the amount of text that is left behind or ahead when a page breaks. Leaving a single line at the end of the page is sometimes undesirable.
Text before a page break is called an orphan and after a page break, a widow. If this terminology is hard to remember, Wikipedia suggests the mnemonic, ”An orphan is alone from the beginning [of a paragraph]; a widow is alone at the end [of a paragraph].”
The default for each property is one line, but this can be adjusted with CSS:
p {
orphans: 3;
widows: 3;
}