Drop Caps in EPUBs

Update 10/4/2011: A reader let me know that the code excerpt on safalra.com did not work for them, so I’ve tested it for myself. There is a bit more to the Safalra.com code than seems necessary to my somewhat inexperienced eye; when I tested it I also had difficulties with it in both Firefox and Safari. I’ve researched some other sites, such as this one, with much shorter and workable solutions. Sample CSS for a working drop cap could include no more than the following:

.drop-this{
  font-size: 5.35em; 
  float:left;
  line-height: .99em;
  margin:0 .1em -.2em 0; 
}

I’ve put together a small ZIP package containing a simple InDesign file, exported EPUB, extracted EPUB content folder containing fixed CSS (a very short, simple CSS file), and final EPUB file for you to download, if interested. Here’s the download link.

—–

A client asked me a very good question today, so I decided to research it and write up the answer. Can InDesign export  drop caps to EPUB? If so, how does it write the tagging and CSS? And if we wish to fine-tune the drop caps, what degree of control does CSS give us? The results of my testing and research follow.

Drop Caps NOT Properly Supported

I ran a number of tests on a simple test file containing two paragraph styles, one of which used a 3-line drop cap. After testing all export settings I determined that InDesign CS5.5 only exports drop caps if you have “Preserve Local Overrides” turned on. This makes little sense, as drop caps are usually used as part of a paragraph style (as they were in this case); yet when you disable only this checkbox, they won’t be exported, even though they are not local overrides. Even if you specify a character style to use for the drop cap in the paragraph style dialog, the drop cap is still treated as a local override during EPUB export. Of course, If you want clean HTML and CSS, you do NOT want to “Preserve Local Overrides.” Many of us use local overrides for adjustments to the print layout that should not end up in the EPUB.

With “Preserve Local Overrides” enabled, InDesign surrounds the drop cap with a span tag and, if you did not use a character style for your drop cap, makes a class for it automatically. When allowed to export its own CSS, embed fonts, and include local overrides, InDesign does create big, dropped letters, but they weren’t perfectly sized or aligned. Fine tuning could improve the sizing and alignment. However, for those of us who do not wish to “Preserve Local Overrides” or who write our own CSS, none of this is very helpful.

I would hope that in the near future Adobe will update InDesign to properly export the required tag for drop caps used by paragraph styles even when the “Preserve Local Overrides” export setting is disabled.

Alternative: Manually Apply Character Style to All Drop Caps

If you want clean code and hand-written CSS, The only option in CS5.5 that I can see is to manually apply a character style to every drop cap. Fortunately drop caps typically occur rarely throughout a publication, so this should not be very time consuming to do.

Select each drop cap in InDesign and apply your drop cap character style to it manually. The character style itself doesn’t need to do anything in InDesign, but be sure to set its export tagging properly. Use the tag with a class that makes sense to you, like “drop.” The whole point is to get the HTML tag and CSS class into the exported files; the style isn’t necessary for the InDesign formatting, but you need to put it there so that you’ll have the tag and class to work with when exported.

Writing Good CSS for a Drop Cap

I found a very nice article on this topic written by Stephan Morley, to which I’d like to refer readers. The author is  attentive to the details involved in properly designing a drop cap, and describes the best way to go about it in CSS that will be most compatible for most devices.  The article can be found here:
http://safalra.com/web-design/typography/css-drop-caps/

I would recommend following Stephan’s guidelines and then making adjustments as needed. Keep in mind that absolutely perfect sizing and alignment consistent across all eBook devices may not be possible, but I’m confident that we can get closer using hand-written CSS than by using the code InDesign exports (which can be a bit of a mess to sort out).

Further Reading

For more information about creating EPUBs from InDesign I’d recommend looking at all my EPUB related articles. And in case you’re wondering, I haven’t written it yet, but I’m hoping to soon write an article about my recommendations for writing CSS for use in EPUBs exported from InDesign, so stay tuned if this topic interests you!

, , , ,

2 Responses to Drop Caps in EPUBs

  1. Sheogorath December 7, 2013 at 2:41 pm #

    Drop caps are such a headache to code given the fact that not every reader supports them, so instead of using them, I simply emulated them by setting the first letter of the first paragraph of each chapter to 15pt (the main text is 12pt) and making it bold. Looks almost like drop caps, but without the issue of some people not seeing them.

Trackbacks/Pingbacks

  1. This Week in InDesign Articles, Number 68 | InDesignSecrets - September 27, 2011

    […] Want to make drop caps in your EPUB files? Paul points out things to watch out for! […]

Leave a Reply