ePub Formatting – How To Add a Page Break To an ePub Document Using HTML or CSS

If you have opened up an ePub file in an ePub editor such as Sigil, you know that every separate XHTML/HTML file will appear as a separate page in an e-reader. There instances, however, that you might like to keep a lot of material in a single HTML file, but have it broken up into separate pages when viewed on an e-reader.

Maybe you have a lot of material that you would like to keep in one HTML file for ease of editing, but you would like it broken up into separate pages when read on an e-reader.

You can force page breaks in an e-reader by using either HTML or CSS. Here’s how to do it with HTML first.

Forcing a Page Break Using HTML

Suppose that a page of your ePub document looks like this when viewed in an e-reader such as Adobe Digital Editions:

ePub Page Without a Page Break Viewed In Adobe Digital Editions

 

Suppose that you would like this text to appear split up as follows (and still keep all of the HTML code for both pages in the same HTML page for easy editing):

Page 1

ePub Page 1 of Split Page Viewed in Adobe Digital Editions

Page 2

ePub Page 2 of Split Page Viewed in Adobe Digital Editions

 
To create the above you would need to insert the following HTML code where you want the page breaks to appear:

<div style=”page-break-before:always;”></div>

After you have added the page break, there is still one more thing that needs tweeking.

The page break will not allow formatting from the first page to continue to the second page. To continue the formatting from the first page, you will have to manually insert the formatting at the top of the second page. Below is the correct way to continue the styling. You simply apply the same CSS styling class from the paragraph before the break to the paragraph after the break as follows.

Here is what the HTML in the ePub editor looks like before this page break is inserted:

ePub HTML Code Before Page Split Is Added - Viewed in ePub Editor Sigil

Here is what the HTML in the ePub editor looks like after this page break and the CSS styling applied to the before and after paragraphs are inserted:

ePub HTML Code Correctly Inserted For a Page Break With Formatting Continued To 2nd Page - Viewed in ePub Editor Sigil

 Styling both paragraphs with the style before and after the break causes that style to passed along after the page break. Once again here are the 1st and  2nd pages as viewed in an e-reader as result of this style continuation:

ePub Page 1 After Page Split Added When Viewed in Adobe Digital Editions

ePub Page 2 After Page Split Added When Viewed in Adobe Digital Editions

Forcing a Page Break Using CSS

If you want to ensure that a page break always appears before certain kinds of headings or paragraphs (e.g. always put a break before A-headers), CSS is one good way to implement this. If you would like to place a page break before chapter/section headings, apply this line to the CSS style for the relevant chapter-head style(s):

page-break-before:always;

You can also place a page break after any specific element by adding this line to the CSS styling that element:

page-break-after:always;

CSS is great for styling elements that repeat themselves in your document because you can change all of the styled elements with just one change to the CSS.