Jan
18
2012

Pull-Quotes in Kindle Format 8

One of the problems with the new Kindle Format is backwards-compatibility. First problem was poetry and hanging indents, which Joshua Tallent solved most excellently: Backwards Compatible Poetry for KF8/Mobi

Next on my list were pull quotes. The old Kindle format never did pull quotes very well, but the new one will float them: very pretty. However… to be backwards compatible with the old mobi format, I had to lose the top and bottom border and use <hr> tags. (*shudders*) And then there’s that <hr> bottom/top margin problem, along with Kindle margin-bottom problem, as well.

I’d love thoughts and suggestions! Kindle markup is just ugly, sometimes.

I’m not 100% happy, but this is what I ended up with:

The Kindle Fire:

kFirebq

Old Kindle e-ink:

kKbq

Kindle for PC:

kPCbq

Kindle for iPhone:

kIPhbq

And the CSS:

/*Kindle Format 8*/
@media not amzn-mobi {
.pqg {
    float:right !important;
    width:40% !important;
    margin: 0;
    padding-right: .5em !important;
    padding-left: .5em !important;
    padding-top:0;
    padding-bottom:0;
    text-align: center;
    border: none;
    }
p.after {
    text-indent:2em;
    }
p.blockp {
    text-indent:0;
    text-align:left;
    margin-top:10px; }
}

/*Old Mobi*/
@media amzn-mobi {
.pqg {
    text-align: center;
    }
p.after {
    text-indent:2em;
    margin-top:30px;
    }
p.blockp {
    text-indent:0;
    text-align:left;
    margin-top:10px; }
}

And then the HTML:

<div class="pqg">
<hr class="nd"/>
<p class="blockp"><span class="gre"><i>
God loves fermentation just as dearly as he loves vegetation.</i></span></p>
<p class="right"><span class="gre"><span class="smallcaps">&ndash; Ralph Waldo Emerson</span><span></p>
<hr class="nd"/>
</div>

<p class="after">

It’s the best I’ve come up with thus far. I can’t wait until the old devices are updated to support KF8, but I’m not real hopeful it will happen anytime soon.

What do you think? Suggestions?

Written by Natasha Fondren in: Kindle Formatting | Tags: , ,

12 Comments »

  • I haven’t tried this for the fiction I’ve been doing but if I ever did any nonfiction I think this would be very important.

  • Very nice. An epub rendering would be cool too.

    • Natasha Fondren says:

      I think I pretty much follow Liz Castro’s formatting for pull quotes for epub. It’s pretty much the same as the KF8 formatting above, with a few tweaks. Border-top and border-bottom: no


      tags, for sure! LOL! Much prettier!

  • Edie Ramer says:

    This makes me want to drink wine! I liked the first one best.

  • [...] TweetLiz Castro has a great post on making poetry look good across multiple devices using media queries in ePUB, “Media Queries for Formatting Poetry on Kindle and ePUB.” Castro focuses most of the post on how to use media queries to make poetry that looks good in ePUB display in a way that will also look correct on Kindle and Kindle Fire in thew new KF8 format. Much of the Kindle formatting instructions come from Joshua Tallent’s seminal book Kindle Formatting. Joshua Tallent also has a post on this at his new eBook Architects Blog titled “Backwards Compatible Poetry for KF8/Mobi.” In this post, Tallent shows you how to use media queries and CSS to apply the old negative text-indent and non-breaking space Mobi poetry workaround in legacy Kindle devices while applying standard CSS negative text-indent and positive margin-left for the KF8. Natasha Fondren (@eBookArtisans) also has a great post of backward compatibility of pull quotes in Kindle and KF8 titled “Pull Quotes in Kindle Format 8.” [...]

  • Natasha Fondren says:

    Actually, I think that I gave up on the display:none too quickly on the hr class. I applied it directly; maybe if I wrapped the hr tag in a span class or div tag with display:none, it might work… and then we could have pretty borders in KF8.

    I’ll put it on the list to test, LOL…

  • Aaron Troia says:

    I was using the horizontal lines like you did in this post and the one thing I did not like is that on the Kindle the quote appeared nicely centered but on the Kindle for iPad the quote doesnt appear vertically centered between the lines. In frustration, I finally took out the horizontal lines on the project because I couldnt get it to match over all the devices I was testing it on.

    • Natasha Fondren says:

      Just an update: If you put the horizontal lines inside div tags, then hiding them works with display:none. I was trying to apply the display:none to the hr tags, and that doesn’t work. Then you can have a pretty border top and bottom that makes everything look much nicer in KF8, and then, um, functional and fairly nice in the old .mobi formats. :-)

      • John Alexander says:

        Could you possibly give the specifics for wrapping the horizontal lines in div tags, and using display:none so they don’t appear in KF8? Thanks for a useful post – other than Chapter 8 of Amazon’s Kindle Publishing Guidelines, I haven’t found much on Media Queries.

        • Ian Barker says:

          I too would like the specifics for coding the ‘hr’ tags so they use ‘display: none’ to not appear in KF8 but in old .mobi. I’ve tried putting the ‘hr’ tag inside a ‘div’ tag with display: none as a style AND applying ‘display: none’ to ‘hr’ tag directly. For both, it hides them in old kindle and KF8. So not sure how to get it so that it just hides them in old kindle so I can keep styles in KF8.

  • Shutch says:

    It would be cool if someone tested this on a Kindle Touch with the new KF8 firmware update, curious how it works out.

RSS feed for comments on this post. TrackBack URL


Leave a Reply

Copyright © 2009 by Natasha Fondren. Powered by WordPress. Theme: TheBuckmaker. SSL Zertifikate, Eigenbau