[dgatwood]

I finally came up with a solution to this problem. The problem is caused by some Kindle variants ignoring the "height: .75em" property. To fix this, I had to use two separate boxes—one box outside the linear flow to hold the drop cap glyph itself, and a second box to push the text over to the side.

To add a bit more pain, on Kindle for iOS, the stylesheet's line-height property on the drop-cap glyph is ignored even when marked !important. The same value works as expected when added to the element's style declaration—a messy workaround, but functional.

The result is drop cap code that is unholy, but the result looks good everywhere. Of course, it looks particularly nice if you view it on Chrome Canary with experimental web features enabled. With a bit of luck, Kindle readers will eventually grow into the more advanced markup, so to speak.

(Note that the code would probably be a bit simpler if the padding were after the drop cap glyph instead of before it, but because of the way my translator code was designed, it was easier to insert extra markup at the drop cap's open tag rather than after its close tag.)

@media not amzn-mobi {
    .chapterdropcap
    { 
        letter-spacing:0 !important;
        text-transform:uppercase !important;
        font-family: "Telegraph Hill", "DG Didot",
                "New Century Schoolbook", "Century Schoolbook",
                "Bookman Old Style", Bookman, serif !important;

        font-size:4.8em !important;
        display: block !important;
        position: absolute !important;
        clear:both !important;
        float:left !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    } 
    .chapterdropcapanchor {
        height: 1px;
        width: 1px;
        position: relative !important;
        border: 0 none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .chapterdropcappad {
        float: left !important;
        display: block !important;
        position: relative !important;
        height: 3.9em !important;
    }
}
@media  amzn-mobi {
    .chapterdropcappad {
        display: none;
    }
    .chapterdropcapanchor {
        display: none;
    }
}

p.kindlefirst em span.dropcap {
        padding-right: 10px;
}

And the HTML:

<p class="kindlefirst">

    <span class="chapterdropcappad" style="width: 2.8032em; margin: -1em 0.192em 0 -0.16em; shape-outside: polygon(0% 0%, 0% 100%, 100% 100%, 100% 75%, 50% 75%, 50% 0%);"></span>

    <span class="chapterdropcapanchor" >
        <span class="dropcap chapterdropcap" style="line-height: 1.2 !important; margin: -0.208333333333333em 0.04em 0 -0.617333333333333em; shape-outside: polygon(0% 0%, 0% 100%, 100% 100%, 100% 75%, 50% 75%, 50% 0%);">L</span>
    </span>

    <span class="smallcap">aura</span>*collapsed on the sofa as ...
</p>