ePub Formatting – How To Add Drop Caps To Your ePub Content

Here is a nice touch that adds a little dash of pizzazz to your epub ebook. With just a little bit of CSS, you can turn the first letter of the first paragraph into a “ Dropped Drop Cap.”

Drop Caps have been used for centuries to set off the first letter of a paragraph or chapter. The Dropped Drop Cap is simply the first letter of a paragraph greatly increased in size and lined up evenly on top with the text next to it.

A true Dropped Drop Cap fits inside the paragraph and does not extend past the left margin of the paragraph.  A Drop Cap that extends outside of the left edge of the paragraph is called an “In Margin Drop Cap.”

The Dropped Drop Cap in an epub document looks like this:

Dropped Drop Cap Inside an ePub Document

Dropped Drop Cap Inside an ePub Document

If we open up the style sheet for this ePub file in ePub editor Sigil, we can see that the two styles used above are written as follows:

This CSS styling class was applied to the entire paragraph.

.No_Indent_Paragraph_Left_Times1 {
 font-family: “Times New Roman”, Times, serif;
 font-size: 1em;
 color: #000000;
 margin: 0em 1.5em 1.2em 8em;
 text-align: left;

This CSS styling class below was applied to a span that contained only the first letter (D).

span.dropcap {
float: left;
font-size: 2.7em;
line-height: 0.8em;
margin-bottom: -0.1em;

That’ll do it. Pretty easy, huh?

It is very simple to do this with an HTML editor such as Dreamweaver or MS Expression Web (my choice). It is much more difficult to do this with Adobe InDesign. If you created your epub with InDesign, you can open the epub file up in epub editor Sigil and add the CSS styles shown above into the existing style sheet.