View Single Post
Old 01-12-2013, 05:04 PM   #1
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
Posts: 277
Karma: 556004
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Drop cap bug on Paperwhite

For some unknown reason, my drop caps are rendered completely wrong on exactly one device: Kindle Paperwhite. Or at least they're wrong in the previewer. It would be great if someone who owns an actual Paperwhite could download the test sample linked at the bottom of this post and confirm whether this problem occurs on the actual device.

My drop caps work fine in other readers (Nook and multiple other ADE-based readers, iBooks, Kindle Fire, Kindle Fire HD, etc.), but Paperwhite reliably renders them way too low and renders the box too tall (so that too many lines are indented).


They should look look like this:




But on Paperwhite, even with Publisher Font enabled, they look like this:




I have drop caps defined like this:

Code:
.dropcap
{ 
        letter-spacing:0;
        text-transform:uppercase;
        font-family: "Telegraph Hill", Didot, "GFS Didot",
                "New Century Schoolbook", "Century Schoolbook",
                "Bookman Old Style", Bookman, serif;

        font-size:4.8em;
        display: inline-block;
        position: static;
        float:left;
        border: 0;
        /* Margins are set on a per-character basis. */
        /* margin: 0; */
        padding: 0;
        line-height: 1.2;
        height: .75em;
}
Or, alternatively, like this:

Code:
    .chapterdropcap
    {
        letter-spacing:0;
        text-transform:uppercase;
            font-family: "Telegraph Hill", Didot, "GFS Didot",
                    "New Century Schoolbook", "Century Schoolbook",
                    "Bookman Old Style", Bookman, Serif;
        font-size:4.8em;
        display: block;
        float: left;
        line-height: 120%;
        height: 0.75em;
    }
With HTML that looks like this:

Code:
<p class="kindlefirst"><span class="dropcap chapterdropcap" style="margin: -0.235714285714286em 0em 0 -0.00428571428571429em;">T</span><!--font size="2"--><span class="smallcap">he</span>*musty air stung their noses as they walked through the abandoned ship, its uninviting halls dark and cold, but there was air.  There was definitely air, and that alone was an improvement.<!--/font--></p>


Does anybody see anything obviously wrong here, or is Paperwhite just massively broken?

You can download a test sample here: kindle_dropcap_sample.mobi
dgatwood is offline   Reply With Quote