Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > Kindle Formats

Notices

Reply
 
Thread Tools Search this Thread
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.
 
dgatwood's Avatar
 
Posts: 629
Karma: 1623086
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
Old 01-13-2013, 03:18 AM   #2
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
"text-transform" and "display: inline-block" are not supported by the ePub spec, but maybe they are by the Kindle, and they probably are unrelated to your problem ("position" is also not in the list of supported CSS properties, but it's mentioned in several places in the spec).
Jellby is offline   Reply With Quote
Advert
Old 01-13-2013, 03:27 AM   #3
Doitsu
Grand Sorcerer
Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.
 
Doitsu's Avatar
 
Posts: 5,582
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
Unfortunately, I cannot help you with your problem, but I wanted to let you know that your .mobi file looked different on my old K3 with KF8 support.
Whatever solution you come up with, you may want to also test it with other eInk Kindles, because it seems that the PW has a different rendering engine.
Attached Thumbnails
Click image for larger version

Name:	screenshot.GIF
Views:	435
Size:	13.5 KB
ID:	99294  
Doitsu is offline   Reply With Quote
Old 01-15-2013, 03:10 PM   #4
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.
 
dgatwood's Avatar
 
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Quote:
Originally Posted by Jellby View Post
"text-transform" and "display: inline-block" are not supported by the ePub spec, but maybe they are by the Kindle, and they probably are unrelated to your problem ("position" is also not in the list of supported CSS properties, but it's mentioned in several places in the spec).
Since it's all uppercase, text-transform is a no-op anyway.

One of the two drop cap styles uses block and the other uses inline-block, so that's also a non-issue.

The position property most certainly is in the EPUB spec. It says "Use of the CSS position property values to achieve absolute positioning (i.e. absolute and fixed) is strongly discouraged."

Note that position: static is the default, so this should always be a no-op. I inserted it just in case there was something screwy going on.
dgatwood is offline   Reply With Quote
Old 01-15-2013, 03:27 PM   #5
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.
 
dgatwood's Avatar
 
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Quote:
Originally Posted by Doitsu View Post
Unfortunately, I cannot help you with your problem, but I wanted to let you know that your .mobi file looked different on my old K3 with KF8 support.
Whatever solution you come up with, you may want to also test it with other eInk Kindles, because it seems that the PW has a different rendering engine.
AFAIK, everyone's drop caps are known to be broken on K3, so my inclination is to pretend K3 doesn't exist until Amazon fixes it.

That said, I would be curious how it looks with Publisher Fonts enabled.

Last edited by dgatwood; 01-15-2013 at 03:38 PM.
dgatwood is offline   Reply With Quote
Advert
Old 01-15-2013, 04:14 PM   #6
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 27,468
Karma: 192992430
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
Like chasin' your own tail, man. Get it in the ball-park, then shake it off and move on. Too many devices with too many different renderers to make 'em all sing the same song on key at the same time.

Why do you have so many fallback fonts in your font-family declarations if you're embedding all the fonts anyway?

Your sample mobi looks the same on the Kindle Fire as your screen-shot from the Paperwhite, BTW.

Last edited by DiapDealer; 01-15-2013 at 04:32 PM.
DiapDealer is offline   Reply With Quote
Old 01-16-2013, 06:10 AM   #7
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by dgatwood View Post
The position property most certainly is in the EPUB spec. It says "Use of the CSS position property values to achieve absolute positioning (i.e. absolute and fixed) is strongly discouraged."
Yes, but it's not in The List. That's what I meant, there are references to it, but it doesn't appear in the list of supported properties, which is probably a bug.
Jellby is offline   Reply With Quote
Old 03-24-2014, 07:02 PM   #8
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.
 
dgatwood's Avatar
 
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
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.)


Code:
@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:

Code:
<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>
dgatwood is offline   Reply With Quote
Old 04-05-2014, 09:18 AM   #9
KarlB
Enthusiast
KarlB began at the beginning.
 
KarlB's Avatar
 
Posts: 36
Karma: 40
Join Date: Feb 2009
Device: clay tablet
I find the following works okay on the PW (in Previewer) and on pretty much everything else that can support drop caps:

Code:
span.dropCapMarnie{
	font-size: 3em; 
	float: left;
	font-family: "Marnie Regular", serif; 
	margin: -0.1em 0.4em -0.2em 0.1em;
	}
KarlB is offline   Reply With Quote
Old 04-06-2014, 02:59 AM   #10
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.
 
dgatwood's Avatar
 
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Quote:
Originally Posted by KarlB View Post
I find the following works okay on the PW (in Previewer) and on pretty much everything else that can support drop caps:
Your style (using font substitution because I don't have that font) seems to indent three lines of content. If you don't mind the third line being indented, that's relatively easy; even Paperwhite does the right thing there.

My goal was to *not* indent that third line. I designed a custom drop cap font with essentially no descenders in any of the uppercase glyphs so that they sit on the baseline of the second line and can allow the third line to safely flow right below the drop cap glyph. The part that causes problems for Paperwhite is setting the height to less than the line height, so that the descender and line gap aren't considered.

I suppose I could alter the font's metrics to show a zero descender and a zero line gap. I'm not sure what problems that would cause, but it might work....
dgatwood is offline   Reply With Quote
Old 04-06-2014, 12:44 PM   #11
KarlB
Enthusiast
KarlB began at the beginning.
 
KarlB's Avatar
 
Posts: 36
Karma: 40
Join Date: Feb 2009
Device: clay tablet
How many lines are indented should vary depending on the font-size you set the drop cap to. But you're probably right that this CSS won't quite work on a PW with your particular font.

"Marnie," for those wondering, is the font (or a close match to the font) used for a decorative raised cap (though not a drop cap, AFAIK) in many of Amazon's advertising images. So if you want to make your book look just like a Kindle ad...

KarlB is offline   Reply With Quote
Old 04-10-2014, 04:14 AM   #12
HarryT
eBook Enthusiast
HarryT ought to be getting tired of karma fortunes by now.HarryT ought to be getting tired of karma fortunes by now.HarryT ought to be getting tired of karma fortunes by now.HarryT ought to be getting tired of karma fortunes by now.HarryT ought to be getting tired of karma fortunes by now.HarryT ought to be getting tired of karma fortunes by now.HarryT ought to be getting tired of karma fortunes by now.HarryT ought to be getting tired of karma fortunes by now.HarryT ought to be getting tired of karma fortunes by now.HarryT ought to be getting tired of karma fortunes by now.HarryT ought to be getting tired of karma fortunes by now.
 
HarryT's Avatar
 
Posts: 85,544
Karma: 93383043
Join Date: Nov 2006
Location: UK
Device: Kindle Oasis 2, iPad Pro 10.5", iPhone 6
Please don't indent initial paragraphs - it looks horrible!
HarryT is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Paperwhite Search Bug Robmonster Amazon Kindle 9 12-18-2012 07:06 AM
drop caps in paperwhite? morrow Kindle Formats 7 12-11-2012 12:10 PM
Please, test if your Paperwhite has this bug Antoinekamel Amazon Kindle 6 10-20-2012 07:21 PM
To cap or not to cap WT Sharpe Calibre 2 04-07-2012 03:45 PM
Using CSS in Word to make a Drop Cap work in an Epub brewt ePub 3 01-31-2009 06:00 PM


All times are GMT -4. The time now is 02:02 AM.


MobileRead.com is a privately owned, operated and funded community.