Image sizing ignored by old Kindles and iOS app - please help

[manfus]

Hi all,

New member here with a first post asking for some help. I’ve searched the forums and can’t find this specific question, but apologies in advance if it’s been asked before.

I’ve created an EPUB (using Calibre which has passed validation) and have converted it to a MOBI file with Kindle Previewer and it’s rendering properly on the majority of Kindle devices and the Kindle app for Android. The issue I’m having is that images are too large on the older Kindles (1 and DX, I believe) and, more importantly, on the Kindle app for iOS. Also, the same devices are ignoring the small caps opening each chapter.

I’ve attached screenshots of what it’s supposed to look like (Kindle app for Android) and the unacceptable results on the old Kindle and iOS devices. The images are the decorative designs to the left and right of the chapter head, and the Persian word. Every chapter begins in this manner.

I’m using image width percentages to size the images, and the font-variant: small-caps span tag for the chapter openings. My image coding looks something like this:

<p class="chapter2"><span class="centered"><img src="leaf.jpg" alt="leaf" width="16%"/>Chapter 2<img src="leaf.jpg" alt="leaf" width="16%"/></span></p>
<p class="subhead4"><span class="centered">Virgin&mdash;<img src="virgin.jpg" alt="virgin" width="18%"/></span></p>

Is there a way to alter the coding to make the images render properly on Kindle for iOS and older Kindles? I’ve read possibly using <img hisrc> in addition to <img src> and defining the width as well as the height="auto". Also, do iOS devices use the new AZK format instead of the MOBI/KF8, and is this why they are ignoring the image width coding? Or is AZK only for previewing purposes?

The small caps are a secondary issue, but if anyone has ideas to fix that as well I’m all ears. Sorry for the novice questions. I’m hoping there’s an easy fix for this.

- M

[Glorfindel]

Get it how you want and make it a picture is all I can think of. I am NOT experianced in this stuff though so if someone else pipes up with something better... Otherwise have you tried converting it with calibre?

[manfus]

Making it an image won't help because it's displaying images that I'm having difficulty with on those devices. Also, Amazon has stated that they will accept MOBI files only produced by their software for KDP, so either Kindlegen or Kindle Previewer. Thanks for the quick reply, though.

[RbnJrg]

In old Kindle devices you have to use pixels and not percentages in images. But even so, is very few what you can do with images in those devices. I doubt you can get what you want in Kindle 1 and Kindle DX by using only one image and pure css. The only thing I can think right now (and could work for .mobi), is that you should use a whole image for the ornaments and the text "Chapter 2". And also you should use media queries in order to not to alter the code for the .kf8 format (that is, you should write some code only visible for .kf8 and some code only visible for .mobi). It's not difficult but either very easy if you don't understand what I writing

And regarding small-caps, you have to use "fake" small-caps in older Kindle devices. Do a search in this forum about that subject and you'll find a lot of info. Read the Kindle Publishing Guidelines regarding media-queries and the supported html tags and css styles for new and old Kindles.

[DaleDe]

To support iOS you need to use Kindle previewer to convert the files to AZK. What you are seeing is old Mobi7 format from mobipocket days displaying wrong and the things that work are for KF8 which AZK mimics. The others have given you tips on making the KF7 display better for older devices but don't expect all the formatting and special displaying to work on these older devices. KindleGen and Kindle previewer can convert modern ePub to KF7 with a lot of caveats that are spelled out in the Kindle guidelines.

Dale

[manfus]

Thank you, RbnJrg and Dale, for your replies. I will try making the entire chapter head an image and see how that works. I'll also look into media queries and the "fake" small caps.

[Hitch]

Originally Posted by RbnJrg

In old Kindle devices you have to use pixels and not percentages in images. But even so, is very few what you can do with images in those devices. I doubt you can get what you want in Kindle 1 and Kindle DX by using only one image and pure css. The only thing I can think right now (and could work for .mobi), is that you should use a whole image for the ornaments and the text "Chapter 2". And also you should use media queries in order to not to alter the code for the .kf8 format (that is, you should write some code only visible for .kf8 and some code only visible for .mobi). It's not difficult but either very easy if you don't understand what I writing

And regarding small-caps, you have to use "fake" small-caps in older Kindle devices. Do a search in this forum about that subject and you'll find a lot of info. Read the Kindle Publishing Guidelines regarding media-queries and the supported html tags and css styles for new and old Kindles.

Make it in a table. Put the text in a cell on the left; put the image in a cell on the right. Constrain the table SIZE within a div. This will be dicey at best on KF7, but, it can constrain the image size. (We do a lot of image-size manipulation, on this very issue, with things like fleurons. All those geniuses at the KDP forums going on and on and on about sizing images with percentages are completely and utterly ignoring the realities of the millions of e-ink Kindles still out there, the iOS devices AND the DX'es that are still on sale, and selling more and more to older populations.)

Your biggest issue is this: KF7 does not have ANY, repeat, ANY CSS. You have to be able to do everything you want in pure, 3.2 HTML. The only thing that will float an image right of text, in KF7, is a table (reliably, I mean). To constrain the size, you either need image fallbacks, using display and no-display, OR, try a table. Be warned, it's imperfect. BUT, you may want to give it a go.

Strongly recommend (we've made thousands of books) that you consider putting the number above the graphic element/glyph/ideogram, and use the display/no-display media queries to get what you want in KF7.

You can try to fake smallcaps using something like "font-size=80%," but be warned, that also go straight to hell on iOS and can be the dog's breakfast on LITB.

AZK is for previewing purposes only. You can't upload an AZK at KDP. You can sideload (via iTunes ONLY) an AZK to K4iOS and see what the book will REALLY look like, as opposed to sideloading a mobi, which will give you false results.

I hope this helps, although by now your eyes are probably glazing over like day-old doughnuts.

Hitch

[RbnJrg]

Originally Posted by Hitch

Make it in a table. Put the text in a cell on the left; put the image in a cell on the right. Constrain the table SIZE within a div. This will be dicey at best on KF7, but, it can constrain the image size. (We do a lot of image-size manipulation, on this very issue, with things like fleurons. All those geniuses at the KDP forums going on and on and on about sizing images with percentages are completely and utterly ignoring the realities of the millions of e-ink Kindles still out there, the iOS devices AND the DX'es that are still on sale, and selling more and more to older populations.)

Your biggest issue is this: KF7 does not have ANY, repeat, ANY CSS. You have to be able to do everything you want in pure, 3.2 HTML. The only thing that will float an image right of text, in KF7, is a table (reliably, I mean). To constrain the size, you either need image fallbacks, using display and no-display, OR, try a table. Be warned, it's imperfect. BUT, you may want to give it a go.

Strongly recommend (we've made thousands of books) that you consider putting the number above the graphic element/glyph/ideogram, and use the display/no-display media queries to get what you want in KF7.

You can try to fake smallcaps using something like "font-size=80%," but be warned, that also go straight to hell on iOS and can be the dog's breakfast on LITB.

AZK is for previewing purposes only. You can't upload an AZK at KDP. You can sideload (via iTunes ONLY) an AZK to K4iOS and see what the book will REALLY look like, as opposed to sideloading a mobi, which will give you false results.

I hope this helps, although by now your eyes are probably glazing over like day-old doughnuts.

Hitch

But Hitch, the OP was talking about a Kindle 1! AFAIK, K1 doesn't support tables. Your idea is good, but for it we'll need a Kindle 2 or newer; with K1 I don't see any other alternative to use a full image that includes the text the OP wants.

[Hitch]

Originally Posted by RbnJrg

But Hitch, the OP was talking about a Kindle 1! AFAIK, K1 doesn't support tables. Your idea is good, but for it we'll need a Kindle 2 or newer; with K1 I don't see any other alternative to use a full image that includes the text the OP wants.

Ruben:

I should have mentioned that (although he didn't expressly say K1). That's why I recommended not trying to do what he's doing, but instead, float them vertically instead. THAT will work on a K1, he won't sacrifice the ideograms, and he can get them to resize with media-queries and display/no-display coding. Thanks for pointing that out, Ruben.

Hitch

[manfus]

Thank you again for your replies. I'm wary of using tables to fix this problem. Also, I realize there are still many people reading on the first couple generations of Kindles, but I'm more concerned with the iOS devices on the Kindle app. In terms of how they read and render the HTML and CSS, is there a solution that can be applied in order to have this display properly on iPhones, iPads and iPod Touches? (besides making the entire chapter head an image, which I still plan to experiment with)

Please let me know if that was unclear.

[Hitch]

Originally Posted by manfus

Thank you again for your replies. I'm wary of using tables to fix this problem. Also, I realize there are still many people reading on the first couple generations of Kindles, but I'm more concerned with the iOS devices on the Kindle app. In terms of how they read and render the HTML and CSS, is there a solution that can be applied in order to have this display properly on iPhones, iPads and iPod Touches? (besides making the entire chapter head an image, which I still plan to experiment with)

Please let me know if that was unclear.

@manfus:

Either use the tables, or the vertical stack, if you're concerned about the iOS display. K4iOS is a kluge to which Amazon keeps applying fixes, but it struggles (and K4iOS on the older iPads works slightly differently than those of the iPads 2-4) as Apple very intently and deliberately doesn't cooperate. K4iOS has a very limited range of abilities, compared to the Fire, HDS, etc. Tables, however, do work.

Please understand: I'm not trying to push you toward a table solution; you'll be FAR better off with the vertical stack. But if you must have the horizontal alignment, then a table 'tis. Moreover, the table will resize the content "for" you, on the fly, and not wrap your lines, which is something I'm not sure has yet been addressed in this discussion.

HTH.
Hitch

[Notjohn]

>You can try to fake smallcaps using something like "font-size=80%," but be warned, that also go straight to hell on iOS and can be the dog's breakfast on LITB.

I do this (though I use 90 percent and boldface). Look Inside ignores the reduction and simply presents the boldface caps. Looks fine to me!

On my iPhone 4S running IOS 7.whatever, both the 90 percent and the bolding look just fine. Is it only on the iPad that things go pear-shaped?

[Notjohn]

Originally Posted by manfus

Also, Amazon has stated that they will accept MOBI files only produced by their software for KDP, so either Kindlegen or Kindle Previewer.

Was that in an email from Support? If it's in the FAQ somewhere, can you point me to it? Thanks!

[manfus]

Originally Posted by Notjohn

Was that in an email from Support? If it's in the FAQ somewhere, can you point me to it? Thanks!

Sure thing, I saw it here:

https://kdp.amazon.com/help?topicId=A2GF0UFHIYG9VQ

Under the MOBI heading. "MOBI files (.prc) created with the legacy program MobiPocket Creator are no longer supported. Only MOBI (.mobi) files created with Amazon tools such as KindleGen tool are supported and recommended. To learn more about using and downloading KindleGen, please visit Tools and Resources."

[Hitch]

Originally Posted by Notjohn

Was that in an email from Support? If it's in the FAQ somewhere, can you point me to it? Thanks!

nj:

Why are you asking this? I've told you this dozens of times on the KDP forums, and I've even copy-and-pasted Amazon's own emails to people (who then come to me as clients) with that same language. ??? They've been sending that email out for the last two years+, usually about Calibre.

Hitch