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

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 – Hot Tips for Using Adobe InDesign To Create an ePub

This article will provide a number of great tips on using Adobe inDesign to create a polished and professional ePub document. This article is actually a continuation of the previous article, which contains a video showing from start-to-finish how to create an ePub from Adobe InDesign. I think you’ll find the video quite helpful if you are a little confused about Adobe InDesign.

 Don’t feel bad if you do not find Adobe InDesign to be intuitive. I don’t think any of Adobe’s products are easy to figure out for the first time. If you have familiarity with any other of Adobe’s products, you’ll recognize the familiar interface and user panels.

 Adobe InDesign is the best all-around publishing tool on the market. It has been adapted to publish in the ePub format and is a good tool for that, but could be better. The advantage of Adobe InDesign to create an ePub is that InDesign completely shields you from the underlying XHTML and CSS code which are the building blocks of an ePub file. If you are a strong web designer with solid HTML and CSS coding skills, you may want to use an HTML editor instead of InDesign to create your ePub. I personally like working with the code because it gives me more ability to customize the ePub file than I have within InDesign.

 Here are some InDesign tips for building ePubs that I have for you:

 –  First of all, upgrade to the latest version of InDesign. At the time of this writing, the latest version is CS5.5. Adobe has forced this upgrade on professional ePub designers like myself by configuring CS5.5 to create InDesign files that cannot be opened with earlier versions of InDesign, such as CS5. There is a work-around, but it’s a PITA. I hope Adobe doesn’t do something like this every 12 – 18 months or with other Adobe products that I use.

–  When bringing images into InDesign, it is best to do the image processing work yourself prior to. Incoming images are nearly always converted by InDesign to .jpeg. You should do that prior to importing the image. You may also want to sharpen, scale, and downsample (to 72 ppi) your images in Photoshop prior to importing into InDesign. This guarantees the image’s appearance instead of leaving the image processing work to InDesign.

–  InDesign’s initial settings should be set so that the InDesign environment most closely resembles an e-reader. Here are the correct settings:

Intent: Web (sets color mode to RGB and units of measure to pixels)

Page size: 600px wise by 800px tall and portrait orientation (most e-readers are about 600 X 800 px)

Uncheck: Facing pages and Master text frames. These options are appropriate for publishing in print but not in ePub. ePub “pages” for the same ePub document vary widely in size depending on the e-reader’s settings and size. In fact, it is probably incorrect to say that an ePub document even has “pages.”

 –  Create your cover image (the image on the first page of the ePub document is the cover image being referred to here) with Photoshop. You can do it right inside InDesign, but Photoshop allows you to do a whole lot more with that image.

–  Keep a good ePub editor handy for touch-up work to the ePub file when you are finished. Once InDesign has exported a file to ePub, it cannot be brought back into InDesign. You can, however, open the ePub file up in an ePub editor, such as Sigil, and do additional touch-up work to the ePub.

–  Another reason to keep an ePub editor handy (I really like Sigil) is that there are a few very basic and essential HTML/CSS styling techniques that have not yet been incorporated into InDesign’s capabilities. One noteworthy example is InDesign CS5’s inability to perform word-wrap around images or float images left or right. This has to be done writing the HTML/CSS yourself and using an ePub editor to add the code to the ePub file. There are quite a few other HTML/CSS limitations within InDesign that can be overcome by simply opening the ePub file in an ePub editor. If anyone reading this article came across any InDesign ePub creations HTML/CSS shortcomings which drove you nuts, feel free to comment on them here. Your feedback  is welcome and very informative.

–  You can control the layout order of items in an EPUB document by using XML tags available within InDesign. This topic is a little too involved to discuss here. I’ll go into this during another blog article. Stay tuned.

– Don’t worry too much about fonts. The font seen by the viewer will depend entirely upon what fonts are available in the viewer’s e-reader. Stick with the basic fonts and your ePub document will appear to viewers as it appears to you.

–  Use a URL shortener such as bit.ly for links to the Internet. Long URLs in an ePub eBook can easily “break” in an e-reader. Also, bit.ly allows you to track the number of viewers who clicked your link.

 There is a short list of tips for creating an ePub document within InDesign. Hope they were helpful to you. I have many more tips on using InDesign to publish an ePub and will post them in upcoming blog articles.

 Cheers.

ePub Formatting – How To Create an ePub with Adobe InDesign

Adobe InDesign is a great tool to create an ePub document. The user interface of InDesign shields the user from any contact with the actual XHTML and CSS code that make up the ePub file. This is perfect for anyone who is not a skilled HTML or CSS designer.

Adobe InDesign does an excellent job when the manuscript has straight-forward formatting and therefore does not require skilled CSS code. A manuscript that is primary paragraph-formatted text with just a few images is a prime candidate for InDesign.

When I have to create an ePub document that has complicated or difficult formatting, I find an HTML editor such as DreamWeaver or Microsoft Expression Web to be a better choice than InDesign. An HTML editor allows direct access to the HTML and CSS code, which expedites implementing the difficult formatting. It is always important to keep in mind that an ePub document is actually a mini web site complete with pages of XHTML, a CSS style sheet, and a folder of images or links to images.

Having said that, InDesign provides a convenient WYSIWYG (What You See Is What You Get) interface that allows the user to make changes and view the results without ever writing code. InDesign’s ease of use and WSYWYG interface has made InDesign the most widely used ePub creation tool.

Here is a detailed, 10-minute video that provide step-by-step details about how to create an ePub document in InDesign from start to finish. This video covers a lot of material quickly. You make have to pause the video a few time to catch everything:

(Is your sound turned on?)

The next blog article will provide a number of tips to follow when using InDesign to create your ePub.