Join Gabriel Powell for an in-depth discussion in this video Adding drop caps, part of Creating Ebooks with InDesign CS4 or CS5.
In this lesson, I'm going to show you how to create a drop cap in an eBook. Unfortunately, when you export an EPUB file from InDesign, any drop cap formatting that you've applied is completely ignored. So to create a drop cap, you have to edit the EPUB file after exporting it from InDesign. Let me show you how that's done. I'll switch over to the InDesign document that was used to create this EPUB file. And to expedite the process of creating the drop cap, I'm going to first apply a character style to the drop cap character.
I'll go ahead and select it, and apply the drop cap character style. And now I can export the EPUB file. From the File menu, I'll choose Export For, and then EPUB. I'll send this file to the desktop, and I'd like to view this eBook, after exporting it, so I'll select this option, and then in the Contents section, I want to deselect include embeddable fonts, and preserve local overrides. And now I'll click Export.
And as you can see, the drop cap formatting was completely ignored in this EPUB file. So, I need to edit this file, in order to create the drop cap. To do that, I'm going to use Oxygen XML editor. At the top of the archive browser panel, I'll click the Open Archive button, select the EPUP file that I want to open up and open it. Now within the OEBPS folder, I'm going to locate that XHTML file that was generated.
I'll open it up, because I'd like you to notice that by applying that character style, you've caused InDesign to create this span element, that surrounds the drop cap character. And notice that the class attribute for this span element is drop cap, which is the name of the character style that I applied. So to format the drop cap I need to edit the CSS rule for drop cap. I'll go ahead and Open up the CSS file. The CSS rules for all the span elements are always located at the very bottom of the document.
And here is the rule for drop cap. It's empty right now. So I need to add formatting to this. I'll start by increasing the fonts size, so I'll type in font hyphen size, followed by a colon, and then I'd like this to be four times larger than the body text size, which is 1em. So I'll just type in 4em, followed by a semicolon. Now I'll save this document, Cmd or Ctrl+S. Now, if you ever are asked this question within the Oxygen XML editor, you don't want to back anything up, so select No Backup and then, Never Ask Me Again.
I'll click OK, that saves the file. Let's open that EPUB file back up. I go ahead and hide Oxygen and I'll hide InDesign as well. Now I will double-click the EPUB file to reopen it, and the new changes that I just made are loaded. And as you can see the drop cap character is now four times larger than the body text size. But now I'd like to make sure that the text flows around the drop cap character.
And I need to bring that character down into the text. So I'll go back to Oxygen, and add another property to this CSS rule, and that property would be float. The float property causes the drop cap letter to float and allows the other text to flow around it. I'd like it to float to the left, so I'll select left from this menu and press Return. And I'll enter a semicolon, and save the file Cmd or Ctrl+S.
I'll reopen the EPUB file to see the results. And now you can see its floating to the left and text is now flowing around the character. But now I need to bring the letter down more into the text. So to do that I am going to add another property which is Line-Height. Line hyphen Height, followed by a colon, and then the value which needs to be a value of 1em or smaller. I'll save that, hide Oxygen and reopen EPUB file, and as you can see that brings Drop Cap Character down into the text.
But now we have another problem. We have too much space below the Drop Cap Character. So to remove that, I'll add yet another property to our CSS rule. And that would be margin bottom. This needs to be a negative value. I'm going to type in negative 0.3em. Now you'll probably go back and forth until you get to the value right, because you need to adjust it according to the size of the drop cap character that you created.
All right let us view the results. And now you can see that works very well so next I could open up a little bit more space of the drop cap character, and to do that I'll add another property and that would be width. This needs to be smaller than a value of 1. I'll just start with 0.8 em, and that decreases the width of the character, which allows a little bit more space to appear to the right side of it.
And that's all there is to it. As you can see, the combination of these CSS properties creates a drop cap. You can even add more properties if you like, such as a font weighted bold, if you want to make your drop cap character appear bold. So now you know how to create a drop cap character in an EPUB file. Simply apply a character style to the drop cap character in InDesign. And then, after exporting the EPUB file, open it up into your favorite editor and edit the CSS.
- Exporting an EPUB file from InDesign CS4 or CS5
- What's inside an EPUB file?
- Editing an EPUB file in Mac OS X or Windows
- Laying out pages
- Working with text
- Exporting graphics
- Creating a table of contents or navigation guide
- Inserting metadata
- Creating scalable images
- Validating an EPUB file