Adding Page Breaks for Your Kindle eBook

Thank you for visiting this eBook design tutorial. We now have an eBook design startup—BB eBooks—dedicated to helping independent authors and small presses get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. Amazon's Kindle Store, Barnes & Noble's Nook, iBookstore, Smashwords, etc.) Please contact us for a no-obligation quote. For those writers, editors, and publishers looking to go the DIY route for eBook production (you probably are if you visited this page), we offer free online tutorials and apps to help you professionally design your eBook. Please visit our Developers page and let’s work together to improve the overall standards of eBooks. Also, please sign up for the mailing list for promotions, design & marketing tips, plus eBook industry news.

Looking for a complete guide on eBook design and development? Please consider The eBook Design and Development Guide, which contains everything you need to know about HTML, CSS, EPUB, and MOBI/KF8 to make an eBook like a pro. Pick it up at Amazon for $6.99 today.

For a long time in web development, no one really cared about page breaks due to the simple fact that websites are designed to be scrolled. However, inserting page breaks and the art of pagination has become essential with eBook design. Proper page breaking vastly improves the reader's experience by clearly annotating breaks in content. Hopefully by now you have realized that page numbers are not needed or wanted in reflowable content eBooks, since the page size is completely arbitrary based on the reader's device and personal settings. But, that doesn't mean that page breaking at the right point in your content is unimportant. A lack of page breaks at the proper location in eBooks is truly the mark of an amateur. People who make the misguided step of converting an eBook directly from a .doc/.docx or, even worse, from a PDF, are bound to have pagination issues and a sloppy eBook.

Forcing Page Breaks in the Kindle

With CSS, forcing page breaks is very easy. There are two basic ways to do this: the page-break-before: always; declaration and the page-break-after: always; declaration. As you probably guessed, the former creates a page break before the markup selected is rendered and the latter creates a page break after the markup selected is rendered. Typically you will want to make page breaks in relationships to major breaks in the content such as chapter headings, section breaks, and appendices. Here is some example CSS to force page breaks:

h2.pagebreak_beforeme 

{

margin: 2em 0 0 0;

page-break-before: always;

text-align: center;

}

h2.pagebreak_afterme 

{

margin: 2em 0 0 0;

page-break-after: always;

text-align: center;
}

Example of Page Breaks in the Kindle Fire

All versions of the Kindle (Kindle Fire, Kindle for iOS, and e-ink Kindles) recognize these page break properties of CSS. Unfortunately, at the time of this writing there is a discrepancy amongst the different devices with the way that the margin is rendered from the top of the Kindle's viewport to the heading with a page-break-before: always; declaration. You will notice that a top margin of 2em was declared in the preceding CSS. Observe how this is rendered differently between the Kindle Fire, Kindle for iOS, and e-ink Kindles:

Problems with Margin Rendering on Page Breaks

The Kindle Fire clips the top margin (and top padding) on anything following a page break, while the Kindle for iOS and e-ink Kindles render it properly. This presents a frustrating conundrum, because anywhere there is a page break in your eBook (and there will most likely be several), you cannot control the spacing between the viewport and the top of the heading on the Kindle Fire. You may be tempted to add blank spaces to force spacing, but you should not resort to such silly tactics. To achieve perfection on your page breaks, there really is only one solution…

The Alternative and Better Method for Controlling Page Breaks on the Kindle

This guide has not discussed yet how to actually build the EPUB package and convert it into a MOBI/KF8 eBook. It is considered good practice to split your HTML file that contains all of your markup and content into numerous smaller files within the eBook package. For technical reasons, this prevents the eReading device from having to load one massive HTML file into its memory, which would make it run slower. Generally, splitting the files should be done somewhere logical (e.g. one HTML file for each chapter). At every split in the HTML file, the eBook on all Kindle devices (and all eReading devices for that matter) will appear as a page break to the reader, regardless of the CSS declarations. Whenever there is a new heading at the start of one of these HTML files, the margin declarations will be recognized.

You will learn more about file-splitting during the discussion of the EPUB package structure. For now just recognize the limitations of using CSS for page breaks.

Avoiding Page Breaks

In some cases you may want to avoid a page break within an element. A good example is the caption of an image. Seeing the image's caption on the page after the image does not make for a good reading experience. To avoid this common scenario, you can use the CSS declaration page-break-inside: avoid;, which will cause the eReading device to try and put all of the selected content on the same page.

Important Note: The page-break-inside: avoid; CSS declaration is only recognized on the Kindle Fire.

Here is some example CSS to declare a paragraph class where the Kindle Fire will try to render all the content in the paragraph element on one page:

p.pagebreak_avoid

{

page-break-inside: avoid;

text-align: center;

font-size: 0.8em;

}

And the corresponding HTML:

<p>…</p>

<p class="pagebreak_avoid"><img src="tester.jpg" width="400" height="600" alt="Picture of a Cute Baby" /><br />The Caption would go here. If it's really long, you probably want it to be on the same page as the picture.</p>
<p>…</p>

Avoiding Page Breaks in the Kindle Fire

This image has a large height (600px) that almost takes up an entire page of the Kindle Fire in portrait orientation. What's happening is the Kindle Fire will insert a page break before the image to ensure that there is room on the subsequent page for both the image and caption. If page-break-inside: avoid; is not declared, you could end up in a situation where the image is rendered at the bottom of the page, and the caption appears on the following page.

Avoiding page breaks is also useful in other situations where you want to guarantee that content is rendered on the same page such as: multiple tables, lengthy quotations, or technical specifications. If you want to avoid a page break in between multiple paragraph elements, consider wrapping everything in a div block element and using CSS to select that div to have the page-break-inside: avoid; declaration.

Tip: If you're workflow involves debugging in a web browser (Chrome is recommended), you can see how the pagination functions in your document under the "Print Preview" feature. Only during printing do web browsers render page breaks.

Hyphens and the Kindle - Not Just Yet

So the good news is that the CSS3 specification allows for the control of hyphenation. This is especially useful in situations where you want to avoid hyphens (like headings). The bad news is that the team at Amazon has not coded their Kindles (even the Kindle Fire) to recognize the CSS to alter hyphenation control. The Kindles do not have a very aggressive hyphenation policy (unlike iBooks), so we're not totally S.O.L. as eBook designers. However, if they decide to issue an update that supports changing hyphenation, the CSS is pretty shake and bake:

Some selector {hyphens: none;}

No Way to Control Hyphens on the Kindle

Adding Page Breaks for Your Kindle eBook