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.

ePub Formatting – The Best Way To Create Paragraph Spacing and First-Line Indenting

One of the ways that an epub closely resembles a mini web site is the formatting at the paragraph level. Just like within a web site, spacing between paragraphs in an ePub document should only be controlled by CSS styling,  never by adding line breaks, which do not export properly to ePub. 

Another paragraph-level formatting element that should always be controlled by CSS is first-line indents. Multiple spaces created with the space bar do not export to ePub.

Here is how to create the proper CSS using Adobe InDesign or an HTML editor in order to sedt proper spacing between paragraphs and first-line indents.

Suppose that you wanted to create paragraphs formatted like the middle one in the image below. This paragraph has blue font color, is bold, and in italics. There is also about 10 px of margin of space on all sides of the paragraph, and the first line is indented about 20 px.

 

ePub Document With Formatted Paragraph Opened Up In Adoble Digital Editions

ePub Document With Formatted Paragraph Opened Up In Adoble Digital Editions

Creating This Paragraph Formatting in InDesign

All of this styling can be contained within one InDesign Paragraph Style and then applied to specific text to create paragraphs styled just as above. Here’s how to do it from within InDesign.

First we have to open up the Paragraph Style dialogue box by Window / Styles / Paragraph Styles as follows:

 

ePub in InDesign - Bringing Up The Paragraph Style Dialogue Box

ePub in InDesign - Bringing Up The Paragraph Style Dialogue Box

 

 Create a new styles button by clicking the New Style button. The newly created paragraph style is now called Paragraph Style 1, as shown below.

Adobe InDesign - Newly-Created Paragraph Style

Adobe InDesign - Newly-Created Paragraph Style

 
Double-clicking on this style brings up the Paragraph Style dialogue box as shown below.

The InDents and Spacing tab is where first-line indents and space around the paragraphs (top, left, bottom, and right margins) are set. We can see in the settings below that 10 pixels of space (margin) has been added to all four side around the paragraph. It is also seen that each first line of a paragraph is given 20 pixels of indent. We have also renamed this Paragraph Style to “Indented Paragraph_1.”

 

Setting Paragraph Spacing and First-Line InDents For a Paragraph Style in Adobe InDesign

Setting Paragraph Spacing and First-Line InDents For a Paragraph Style in Adobe InDesign

 
Below is the Character Color tab that the blue font color of the Paragraph Style can be set:

Setting Font Color for a Paragraph Style in Adobe InDesign

Setting Font Color for a Paragraph Style in Adobe InDesign

 

The tab entitled Basic Character Formats is where basic character formatting items such as font-family, bold, and italics are assigned to the font style.

When the style has been created, apply to text by highlighting the text: 

Highlighting Text in Adobe InDesign Before Applying a Paragraph Style to the Highlighted Text

Highlighting Text in Adobe InDesign Before Applying a Paragraph Style to the Highlighted Text

and then apply that paragraph style to the highlighted text by clicking on the newly-created paragraph Style:

Applying a Paragraph Style to the Middle Paragraph in Adobe InDesign

Applying a Paragraph Style to the Middle Paragraph in Adobe InDesign

 

When InDesign creates a Paragraph Style, it actually adds a CSS style to the ePub’s cascading style sheet that controls the styling and formatting of the entire ePub document. This can be seen by opening up the resulting ePub document in an ePub editor such as Sigil as below.

The newly created style is called indented-paragrap_1.

 

ePub CSS Style on CSS Style Sheet Created By Adobe InDesign

ePub CSS Style on CSS Style Sheet Created By Adobe InDesign

 

Below is, once again, the InDents and Spacing tab of the Paragraph Styles dialogue box. All of the margins are 10 px so only “margin” (and not top, bottom, left, or right margin) is configured in the CSS style created by InDesign.

 

ePub Formatting - Setting InDents and Paragraph Spacing in Adobe InDesign

ePub Formatting - Setting InDents and Paragraph Spacing in Adobe InDesign

If you were using an HTML editor to create this paragraph style, you would simply create the following style and add it to the ePub’s style sheet as follows:

 

ePub Formatting By Creating a CSS Style in the ePub's Cascading Style Sheet

ePub Formatting By Creating a CSS Style in the ePub's Cascading Style Sheet

You would then apply that text a paragraph of text as follows:

 

ePub Paragraph Formatting By Applying a CSS Style Directly into the ePub's XHTML Code

ePub Paragraph Formatting By Applying a CSS Style Directly into the ePub's XHTML Code

The above was shown by opening up the ePub file in ePub editor Sigil.

ePub Formatting – How To Float an Image in ePub Left or Right With Word Wrap

If you are placing any images into your ePub, three basic formatting tools you probably want are 1) Text wrap, 2) Float right, and 3) Float left. If you are creating your ePub with Adobe InDesign up to version CS5, you’ll have to implement text wrap and floating left or right by writing the CSS yourself. This blog article will show you how to do that.

Text wrap functions in Adobe InDesign ( at least up to version CS5) do not export to ePub. If you have created your document within InDesign, you’ll need to export to ePub and then open the resulting ePub file in an ePub editor such as Sigil (my favorite). When doing this, remember that you cannot open up that ePub file in InDesign again. Make sure all of your InDesign work is completed on the file before you export to ePub.

As I probably mention in almost every article in this blog: an epub document is just like a mini web site complete with pages of XHTML, a cascading style sheet that controls all styling and formatting, and a folder of images or links to images. When you open your ePub up in an ePub editor, you’ll see the pages of XHTML and the style sheet.

To apply text wrap and float left or right to an image on a page of text in an ePub document, you need to do two things:

1) Open up the style sheet and add a CSS class for float left or float right.

2) Apply that style to the image.

These two things are also just what you would do if you wanted to float an image left or right and have text wrap around it on a web page.

Let’s go through the process and see how it looks:

1) Open the ePub File in an ePub Editor. Here I am using ePub editor Sigil, my favorite. You can see that an epub file is just like a mini web site. Here we can see the single page of XHTML content named Page_1.xhtml. We can also see the cascading style sheet named template.css. The top half of the display shows the WYSIWYG (What You See Is What You Get) editing screen and the bottom half is the XHTML editing screen 

Open ePub File in ePub Editor Sigil

Open ePub File in ePub Editor Sigil

 
2) Place the Cursor Where You Want To Place the Image and Hit the Insert Image Button. Select the Image To Be Placed. 

Add Image to ePub in Sigil With the "Insert Image" Button

Add Image to ePub in Sigil With the "Insert Image" Button

Here is the image after insertion:

An Image in ePub Before Applying CSS

An Image in ePub Before Applying CSS

 Note that the image is placed inline with its line of text. You can see the XHTML code for this image in the XHTML editing screen. This is all you can do with Adobe InDesign CS5. To apply a float left or right along with text wrap, you need to create and apply a float class to the image as we are about to do.

3) Open Up the ePub’s Style Sheet in Sigil. This style sheet is named template.css. Adobe InDesign created this style sheet. Each CSS style created by InDesign whenever you create a Paragraph or Character Style always has at least the following 11 attributes: 

Open Up the ePub's Style Sheet in Sigil

Open Up the ePub's Style Sheet in Sigil

4) Create the FloatLeft Class as Shown Below. This class enables float left and text wrap simultaneously, just like it would on a web page. 

Create the CSS Float Class for the ePub in Sigil

Create the CSS Float Class for the ePub in Sigil

5) Apply This Class to the Image. You can see the FloatLeft class applied in the XHTML editing screen. You can see that the image now floats left and also performs text wrap. 

ePub Image After Applying the CSS Float Class

ePub Image After Applying the CSS Float Class

Here is the “before” image again so that you can compare the difference:

ePub Image Before Applying the CSS Float Class

ePub Image Before Applying the CSS Float Class

That’s it!

ePub Formatting – How To Create an EPUB With Microsoft Expression Web

There are a lot of ways to make an ePub, but for anyone with HTML and CSS skills, there’s only one best way. What a lot of people don’t realize is that an ePub document is little more than a mini web site.  A good web designer can very easily build a polished and professional ePub using the same HTML editor tool that he or she would use to build a web site. Dreamweaver or Microsoft Expression Web (my favorite) are excellent choices.

Just like a web site, an ePub file consists of pages of XHTML content, a cascading style sheet that controls all formatting and styling, and a folder of images or links to images. ePub readers “view” ePub documents almost the same way that a browser views the Internet.

If you wish to view an ePub’s pages of XHTML or its style sheet, open the ePub file up in an ePub editor. The most widely used ePub editor is Sigil. It is a free download. Just Google “Sigil” to get the download link. When you open an ePub file in Sigil, you’ll see a collection of folders. The first three folders you’ll see are the Text folder (holds the content pages of XHTML), the Styles folder (contains at least one cascading style sheet which control all formatting and styling), and the Images folder (contains all images or links to images).

If you decide to use an HTML editor such as Dreamweaver to build your ePub document, just set up the same folder structure in Dreamweaver the same as is in Sigil. You only need to set up the Text and Styles folder in the HTML editor. You won’t be working with any images in the HTML editor. 

Here is a view of the Text, Styles, and Images folder within Sigil:

ePub Editor Sigil With Text, Styles, and Images folders

ePub Editor Sigil With Text, Styles, and Images folders

 
Here is a view of the Text and Styles folder set up inside the same directory in the HTML editor (Microsoft Expression Web):

HTML Editor With Text and Styles folder to create an ePub

HTML Editor With Text and Styles folder to create an ePub

Once you have set up the file structure (the Text and Styles folders within the same directory) in the HTML editor, create a stylesheet in the Styles folder of the HTML editor. Name the stylesheet in the HTML editor using the same name that it has in Sigil. You can see that the stylesheet here in both the HTML editro and in Sigil is named stylesheet.css.

You then create your pages of web content in the HTML editor. All styling and formatting must be derived by the stylesheet. Don’t even use the Bold button to bold text. Create a CSS style that bolds text when applied and then always that style instead of hitting the Bold button.

After you have created your web page in your HTML editor, simply duplicate the same pages in Sigil. For each web page you’ve create in your HTML editor, create a new page in the Text folder of Sigil and cut-and-paste the HTML from the HTML editor into that Sigil page.

Once you have created all of your pages in Sigil, insert the images. That is a simple matter of viewing a page within Sigil in the design view, click  the cursor where you want to place the image, and then click the image insert button in Sigil. You’ll select the image on your hard drive or wherever it is stored and it will then be inserted where your cursor was.

Before placing images into Sigil, you should trim the image files to 500 px max in both width and height, downsample to 72 ppi, and convert to RGB color mode if necessary, sharpened, and save them as .jpeg, .gif. or .png.

That’s it! You’ve just created an ePub by hand. There are a lot more touch-ups that you can do at this point, but you’ve done all the heavy lifting. Your ePub document in its basic form is created.

Here is a step-by-step video which will show you exactly how to perform the above steps, and a few others as well. By the end of this video, you’ll be able to create a basic ePub document using an HTML editor (such as Dreamweaver) or an ePub editor (such as Sigil).

I(Is Your Sound On?)

Step-By-Step Video Showing How To Create the Most Customized Possible ePub

If you create your ePubs this way, you will have much more control over the XHTML and CSS than you do with all other ePub creation tools. You’ll be able to customize your ePub in ways that other tools such as Adobe InDesign can’t touch. That is why I create most of my ePub documents with an HTML editor just like the video shows. If you have good HTML and CSS design skills, you most likely will want to use an HTML editor to create an ePub file also. It is not the easiest way to create an ePub, but it will produce a more most polished and customized ePub than any other method, by far.