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

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
ePub Page 1 of Split Page Viewed in Adobe Digital Editions

Page 2

ePub Page 2 of Split Page Viewed in Adobe Digital Editions

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

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

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 1 After Page Split Added When Viewed in Adobe Digital Editions

ePub Page 2 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.

Advertisements

3 thoughts on “ePub Formatting – How To Add a Page Break To an ePub Document Using HTML or CSS

  1. Thanks for posting this. I’ve never used the CSS property “page-break-after:”. That being said, your article is titled: ePub Formatting – How To Add a Page Break To an ePub Document Using HTML or CSS, however both ways stated are using CSS. To make it a little less confusing, you could change the “or” to “and.”

    Cheers.

  2. Pingback: ePUBSecrets » Blog Archive » Formatting Poetry in ePUB: Part 2

  3. Pretty cool, this “page-break-after”, but separated documents still are the effective way to make this really happen.
    I mean, when I use “page-break-after” at the css or at the HTML page, ADE is ok. But if I open it at another software (like “Calibre”), this code does not work. There’s no page-break at all.
    So, It is good making those codes to create (or trying to) page breaks? It is effective at the mobile’s (or tablet’s) eReaders?

    Sigil break the pages with no problems, maintaining the HTML formating, but creating a new document. So if the broken page have a TOC style on it, you’ll have to go to the TOC document and update the “src” name for each broken page.
    This is good to TOC that have second layer. The second layer has not page breaks by default.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s