Basic CSS not working in Kindle iOS App

[JohnnyW]

I have some really simple CSS styles that work fine in the Kindle preview software, and on my actual Kindle Paperwhite, but when I send it to my iPad/iPhone and use the Amazon Kindle App, they don't work.

For example...

The CSS:

    #copyright p {
        text-align: center;
    }

The HTML:

    <div id="copyright">
      <p>©2014 Author's Name</p>
    </div>

The output is centered in the Kindle Previewer, and on actual Kindle Paperwhite, but left aligned in the iOS app.

Another example:

CSS:

    p.author-s-voice {
        font-style: italic;
        text-indent: 1.2em;
    }

HTML:

    <p class="author-s-voice">Lorem ipsum dolor sit amet, consectetur....</p>

The output is italicized in the Kindle Previewer, and on actual Kindle Paperwhite, but not in the iOS app.

This seems like really basic styling, why is it being ignored by the Kindle app?

[Doitsu]

Originally Posted by JohnnyW

This seems like really basic styling, why is it being ignored by the Kindle app?

You'll need to change the default device setting in Kindle Previewer to Kindle for iPhone/iPad. KP will then generate an additional .azk file that you'll need to sideload to your iPhone/iPad via iTunes App sharing.

[JohnnyW]

Thanks for your reply. I've heard this before, but what I don't understand is why the Kindle Previewer conversion is any different from Amazon's server conversion. Both produce the same AZK files, don't they?

[Doitsu]

Originally Posted by JohnnyW

I've heard this before, but what I don't understand is why the Kindle Previewer conversion is any different from Amazon's server conversion.

The AZK format is relatively new. If you send a book to your iOS Kindle app via the Send to Kindle feature, you'll most likely end up with a (.mobi/.azw) Mobi7 file, which doesn't support some CSS features.

You can easily test this with the iTunes file sharing feature. (Select the Kindle app, look for your book and check the file extension.)

[DiapDealer]

Originally Posted by JohnnyW

I've heard this before, but what I don't understand is why the Kindle Previewer conversion is any different from Amazon's server conversion. Both produce the same AZK files, don't they?

Actually, I don't think an AZK file is produced at all on the server side. The format exists solely to enable previewing of user-created KF8 books on the iOS platform. There is something different about the iOS Kindle app that doesn't allow sideloaded, dual-purpose, kindle previewer-generated content to properly display the KF8 portion (the mobi-only portion is fine). Hence the need for a special preview-only, side-loadable format.

I could be wrong, though.

[Hitch]

Originally Posted by Doitsu

The AZK format is relatively new. If you send a book to your iOS Kindle app via the Send to Kindle feature, you'll most likely end up with a (.mobi/.azw) Mobi7 file, which doesn't support some CSS features.

Send to Kindle actually sends K7, prc files. Don't bother to use it. Utter waste of time.

You can easily test this with the iTunes file sharing feature. (Select the Kindle app, look for your book and check the file extension.)

This is the only way to test azk files. They can't be loaded any other way. K4iOS seems to selectively support SOME KF8, but not most.

Hitch

[JohnnyW]

Thanks for your help. The book is now for sale (buy it here: http://www.amazon.com/Reflections-Or...dp/B00NE641WU/ ... or not) but if you use the "LOOK INSIDE" feature, you'll see that the formatting is all screwed up -- just like it was when I sent it to iOS via SEND.

As I say, the book is fine in an actual Kindle...!

What's going on?

[Hitch]

Originally Posted by JohnnyW

Thanks for your help. The book is now for sale (buy it here: http://www.amazon.com/Reflections-Or...dp/B00NE641WU/ ... or not) but if you use the "LOOK INSIDE" feature, you'll see that the formatting is all screwed up -- just like it was when I sent it to iOS via SEND.

As I say, the book is fine in an actual Kindle...!

What's going on?

Oh, dear.

What do you mean, when you say, "the formatting is all screwed up?" What is it you are expecting it to DO? Given that the first 10% is up on Amazon, in the LITB, anyway, can you put up some screenshots of what you're expecting, versus what's displaying in the LITB and on the iOS?

Hitch

[Doitsu]

@JohnnyW: Two questions:

1. Did you actually test a Kindle Previewer generated .azk file with the Kindle for iOS app?
2. Did you upload the HTML source files, an ePub or a Kindle Previewer generated .mobi file to KDP?

[Hitch]

Originally Posted by Doitsu

@JohnnyW: Two questions:

1. Did you actually test a Kindle Previewer generated .azk file with the Kindle for iOS app?
2. Did you upload the HTML source files, an ePub or a Kindle Previewer generated .mobi file to KDP?

Doits:

I don't know what he did--I have a suspicion--but his italicized font is not showing up in the LITB or iOS. He italicized TNR. I suspect that this is possibly because he's italicizing with a paragraph STYLE, rather than using the usual italics tags, or even spans, for the text he wishes to be italicized.

Also, his centered material is showing up not-centered on both. My first guesstimate would be to wrap all that in spans--see if that helps. We all know how hinky the iPads can be about not-spanned material, whether it's iBooks or "other."

I'm not quite sure why his centered material isn't showing up that way, unless the errata is in the HTML/ePUB/MOBI, but the italics...if the book was created with embedded TNR fonts, like you sometimes see with Mac products, it's possible that the italics aren't showing up because the TNR-Italic font isn't embedded.

Given that it's also NOT working in iOS, I'm fairly sure it's not just that he used "Send to Kindle," or sideloaded the mobi instead of the .azk.

Hitch

[Doitsu]

Originally Posted by Hitch

I have a suspicion--but his italicized font is not showing up in the LITB or iOS. He italicized TNR. I suspect that this is possibly because he's italicizing with a paragraph STYLE, rather than using the usual italics tags, or even spans, for the text he wishes to be italicized. [...] Also, his centered material is showing up not-centered on both.

I asked, because I tested both styles that the OP mentioned in the fist post exactly as specified, and they both survived the AZK conversion beautifully and displayed exactly as the AZW3 version with my current v4.4 Kindle for iOS app.
Of course, as you know, some older Kindle for iOS apps only support some kind of enhanced mobi7 and might display text differently.
I.e., if someone downloads the book with an older Kindle for iOS app, they might get the mobi7 content.
However, that problem, too, can be handled to some extent by using media queries & fallback styles.

[Hitch]

Originally Posted by Doitsu

I asked, because I tested both styles that the OP mentioned in the fist post exactly as specified, and they both survived the AZK conversion beautifully and displayed exactly as the AZW3 version with my current v4.4 Kindle for iOS app.
Of course, as you know, some older Kindle for iOS apps only support some kind of enhanced mobi7 and might display text differently.
I.e., if someone downloads the book with an older Kindle for iOS app, they might get the mobi7 content.
However, that problem, too, can be handled to some extent by using media queries & fallback styles.

Well, we need him to reply. I'm not having any issues here, with iOS not doing what I expect (which isn't much, to be honest), but we've been through a lot with it, historically. Until he responds as to how everything is really used, etc., we're air-punching here.

Hitch

[JohnnyW]

Originally Posted by Doitsu

I asked, because I tested both styles that the OP mentioned in the first post exactly as specified, and they both survived the AZK conversion beautifully and displayed exactly as the AZW3 version with my current v4.4 Kindle for iOS app.

It's strange. The styles didn't survive "Send to Kindle", but they did survive side-loading the AZK file through iTunes. It's kind of a moot point now that book is published, however.

Unfortunately I don't know if the author uploaded the .mobi or the .epub. I guess that could make a difference?

You can see from the "Look Inside" that the information on the copyright page is left aligned, for example (which is one of the examples from the first post).

UPDATE: Mercy me! It appears to be working just fine in the Kindle iOS software now. Hurrah! I guess it's just the "Look Inside" that isn't working -- I can live with that.

[DiapDealer]

Originally Posted by JohnnyW

It's strange. The styles didn't survive "Send to Kindle", but they did survive side-loading the AZK file through iTunes. It's kind of a moot point now that book is published, however.

It's not strange (OK it IS, but it's not a surprise ) Sideloading the AZK file through iTunes is the ONLY way you can preview KF8 on iOS. Not one of a few ways, but the only one. I know people don't want it to be this way, but it is. That's why people giving advice stress the fact so strongly. There simply is no alternative to side-loading the AZK file. None

[Hitch]

Originally Posted by DiapDealer

It's not strange (OK it IS, but it's not a surprise ) Sideloading the AZK file through iTunes is the ONLY way you can preview KF8 on iOS. Not one of a few ways, but the only one. I know people don't want it to be this way, but it is. That's why people giving advice stress the fact so strongly. There simply is no alternative to side-loading the AZK file. None

Gang:

C'mon, now, I'm not the only one here who knows this!!! "Send to Kindle" creates a KF7 file, not a KF8. !!!

Hitch