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:
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):
To create the above you would need to insert the following HTML code where you want the page breaks to appear:
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:
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:
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:
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):
You can also place a page break after any specific element by adding this line to the CSS styling that element:
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.