View Full Version : Dropcap madness

11-05-2012, 10:19 PM
A previous thread ( discusses decorative initial caps and gives code for them. I had tried using a drop cap and found that while the it looked fine in a browser, when I converted to .epub or .mobi, it became a stickup cap in readers--projecting above the first line. I didn't really care, but there was extra space between the first and second lines of the chapter.

In hopes of eliminating that, I changed the dropcap to just a larger (2em) capital, bold, but the extra space between the first and second lines is still there (I assume because of the 2em cap). The earlier thread refers to a blog by John Nachtimwald, with some sample files, including a stickup cap that's 4 ems. Unfortunately, there's also a 4-em space between the first and second lines of the chapter, so it looks like that's an undesirable side effect of a large initial cap, whether drop or stickup. Is there a way to eliminate this and still have a decorative initial cap, either drop, stickup, or just larger?

On a related subject, I notice that if I specify less than 1 em for margin-top or bottom, I get nothing in epub, though it works in Kindle. I also tried specifying in pixels, but that doesn't help either. Is a full linespace (1em) the only option?


11-06-2012, 01:21 AM
Digging through this thread ( will probably reveal all that is currently known about doing drop caps... and a lot of other neat things you may someday find a use for.
There are a few other threads about drop caps, actually, but that one should get you started in the right direction.

11-06-2012, 05:09 AM
Mobi does not support drop caps, but ePub does, so either the process you're using to create the ePub is broken, or the reader is limited.

The additional space you see between the 1st and 2nd lines when you use a large initial letter is probably due to an increased line height. The reader is putting more space there to allow for descenders in the large initial (think of a Q or J in some typefaces). You can cancel it by adding "line-height: 0;" to the CSS code of the drop/large cap, although that could cause overlapping in some cases.

11-06-2012, 03:12 PM
Jellby, thanks. If mobi doesn't support drop caps, I don't think I'll do it just for epub. Line-height is a good idea--I'll try it when I recompile.

Pholy, I saw that thread, but I'm not sure the problem was my code. However, if I use drop caps again, I'll try some modifications.

11-08-2012, 02:34 PM
The new mobi (mobi8) supports drop caps. The old mobi (mobi7) does not. The new mobi is used by all current Kindle devices on the market and some older models if the user upgrades their device. You use a media query in the css. Like this:

@media amzn-kf8 {
span.dropcap {
font-family: Optima, "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 4em;
color: #21409a;
margin: -.1em .1em -.1em .1em;
@media amzn-mobi {
span.dropcap { font-size: 2em; line-height: 0;

Make an epub and convert it to mobi using the latest Kindlegen. This will create a wrapper file that contains both mobis. Opening an epub using the Kindle Previewer will do the same thing as it has Kindlegen built in. You will need to do a different css style sheet for you actual epub -- the Kindle media queries break on the Nook and it won't honor your style sheet at all.

11-09-2012, 02:45 AM
Thanks, Amy. I knew about kf8 but had already changed the code to a stickup cap and have two versions, one for mobi and one for epub, so I don't think I'll go back and rejigger it. Out of curiosity, though, why do you have such small margins around (I assume) the dropcap? That was one other problem I noticed when I viewed the dropcaps in a browser--the varying space between different-width letters and the rest of the paragraph. But isn't -.1 (or even +.1) on the left and right a little crowded?

11-09-2012, 09:57 AM
You know, I'm not sure why I did that now but it doesn't look crowded at all. The left and right .1em actually gives it a tad more space. The -.1em is for the top and bottom. I think it wasn't lining up right without it. But I have a later book that doesn't have that and it looks fine so I'm not recommending it. I believe I got it that code from a post on the mobi mobileread forum. I found something better later.

Anyway, I was really just showing how the media query is done.

11-09-2012, 07:57 PM
Have you looked at it with different type sizes and fonts? Since the ereader is basically a small web page, I'm always a little dubious about whether a particular design will hold up to different user preferences.