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.

Advertisements

One thought on “ePub Formatting – The Best Way To Create Paragraph Spacing and First-Line Indenting

  1. I’m converting an existing book to EPub using Word 20l0. How can I mass change my existing 5 space tab to a 3 space tab. Is there a way to use find and replace to do this before I try it out in an EPub conversion program

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