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

Posted on December 20, 2011 by ePub and eBook Help

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

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

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

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

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

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

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

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

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

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

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

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

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

Posted on December 2, 2011 by ePub and eBook Help

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

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

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.