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.

About these ads

One thought on “ePub Formatting – How To Add Drop Caps To Your ePub Content

  1. Pingback: Using Drop Caps in your ePub and Kindle eBooks | Joyce Sandilands, Author

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