How to center images in OLD mobi7 for Voyage

[GrannyGrump]

Is my problem with the CSS, or is it with the MOBI format, or is it with the VOYAGE, or is it with the KINDLE PREVIEWER? (come on, I'm giving you enough choices, you must have an opinion!)

I build my epub with Sigil, then convert to mobi using Calibre v 2.47.
I am using Kindle Previewer for PC v2.92 to view the books after conversion. When viewing the result for the Voyage, the pictures are left-aligned. For Kindle DX, they are centered as they should be.

I have tried using <center></center> with a div with text-align: center, and also added a class assigned directly to the image with text-align:center.

.illus 
{
border: 0; padding: 0;
text-indent: 0;
text-align: center;
page-break-inside: avoid;
margin-top: 1.0em;
margin-bottom: 1.0em;
}

.img100 
{
width: 900px;
height: auto;
margin-left: auto;
margin-right: auto;
}

HTML:

<div class="illus">
 <img alt="" class="img100" id="cwa-07" src="../Images/cwa-07.jpg"/>

<div>THROUGH HILLSIDE VILLAGES</div>
</div>

ALTERNATE HTML:

<center>
<div class="illus">
 <img alt="" class="img100" id="cwa-07" src="../Images/cwa-07.jpg"/>

<div>THROUGH HILLSIDE VILLAGES</div>
</div>
</center>

Incidentally, the Calibre conversion to azw3 seems flawless.


So, what is the verdict? Is there a solution for me?


EDIT TO ADD: The actual kindle format ebooks are here:
https://www.mobileread.com/forums/sho...d.php?t=275896

[Doitsu]

I tested both files on my Paperwhite 2, and in both versions the image was centered.

However, eInk Kindles don't support NCX TOCs with more than one sublevel.
I.e., in your book readers can't select the chapters under PART I and PART II in the azw3 file.

[GrannyGrump]

AAARRRGGGHHH! Please don't tell me I forgot again to flatten the TOC.
I will fix that/those, and upload again.

EDIT TO ADD: The nested TOC works fine in Previewer, I just don't know if I can trust that emulator!!!!

I guess the image-centering problem might be with the Previewer itself. Anyway, there seems to be nothing I can do to change it, so I guess I will just leave the images as they are and quit worrying about them.

Thank you for checking for me.

[Doitsu]

Originally Posted by GrannyGrump

EDIT TO ADD: The nested TOC works fine in Previewer, I just don't know if I can trust that emulator!!!!

That's because Kindle Previewer uses KindleGen, which'll automatically flatten the TOC if necessary.
BTW, the Kindle for PC app displayed the TOC in your .azw3 file just fine.

Originally Posted by GrannyGrump

I guess the image-centering problem might be with the Previewer itself. Anyway, there seems to be nothing I can do to change it, so I guess I will just leave the images as they are and quit worrying about them.

IIRC, Hitch mentioned some weird Voyage rendering bug. Hopefully, another MR member with a Voyage will also test your book on it.

[Hitch]

Originally Posted by Doitsu

That's because Kindle Previewer uses KindleGen, which'll automatically flatten the TOC if necessary.
BTW, the Kindle for PC app displayed the TOC in your .azw3 file just fine.


IIRC, Hitch mentioned some weird Voyage rendering bug. Hopefully, another MR member with a Voyage will also test your book on it.

I did, but it's not centering. I mean, the bug isn't about centering. It's about image rendering for image elements that are supposed to be larger than 50% but smaller than 100%. (FWIW, the Voyage has been blowing them up to full-width of the KF8-rendering Voyage).

I can check that Voyage view later tonight.

HOW are you checking them? I mean...do you have a table of illos, and are you jumping through from there, or are you paging to the page/screen/Loc?

Hitch

[Doitsu]

Originally Posted by Hitch

HOW are you checking them? I mean...do you have a table of illos, and are you jumping through from there, or are you paging to the page/screen/Loc?

GG's book has a list of illustrations, which makes it very easy to check all images.

[RbnJrg]

Originally Posted by GrannyGrump

I guess the image-centering problem might be with the Previewer itself. Anyway, there seems to be nothing I can do to change it, so I guess I will just leave the images as they are and quit worrying about them.

Maybe you could try to give the images a width in percentage and then to set left and right margins according to that percentage. For example, you could use the following class="kindle" for your images:

img.kindle {
    witdth: 80%;
    height: auto;
    text-align: left;
    text-indent: 0;
    margin-left: 10%;
    margin-right: 10%
}

Regards
Rubén

[Hitch]

Quick note:

We've noted, recently, that the Voyage emulator is out of whack. Specifically, today, we watched it (and the matching KDP emulator, mind you) "melt" letters. I know, that sounds like I should knock off the whacky tabaccky, but...we embedded Steelfish Condensed into a book, and on the KDP emulator, for Voyage alone, the letters seem to be literally melting off the page (think a cross between the Wicked Witch of the West, and candle wax in the Wizarding Times...), but nothing of the sort is happening on the real device.

I forgot (sorry, GG!!!) to test this the last two days. Mea culpa--I'd forgotten when I'd posted that I was set to have a very minor medical thing, Wednesday, and while the thing itself isn't dreadful, the side effects and meds afterwards make me completely bonkers. I'll try to remember, GG, to check it tomorrow. I've shut down the "Brains" tonight. (As if there were a choice...).

@Doits:

Actually, as bizarro-world as this sounds, I was wondering if the links from a table of Illos might be INSIDE the rendering instructions, e.g., that the id that the link jumps to came after the CSS class, and so, like the old glitch with Chapter heads rendering left-aligned, if that was happening here. I just saw something identical to this on the KDP forums--we all forget about these old bugs/glitches.

That's why I asked about the exact "way" she was checking.

I'll take a peek tomorrow. If I screw up again, at some point in time my brains will recover and I'll remember.

Hitch

[dgatwood]

Originally Posted by Hitch

We've noted, recently, that the Voyage emulator is out of whack. Specifically, today, we watched it (and the matching KDP emulator, mind you) "melt" letters. I know, that sounds like I should knock off the whacky tabaccky, but...we embedded Steelfish Condensed into a book, and on the KDP emulator, for Voyage alone, the letters seem to be literally melting off the page (think a cross between the Wicked Witch of the West, and candle wax in the Wizarding Times...), but nothing of the sort is happening on the real device.

You mean like a faint outline instead of a solid letter? It's probably a rounding bug in one particular version of whatever font rendering engine that WebkitGTK+ uses. Heck, I wouldn't be surprised if the bug went away if you ran the previewer on a different platform (or even on a 32-bit CPU instead of a 64-bit CPU).

[Hitch]

Originally Posted by dgatwood

You mean like a faint outline instead of a solid letter? It's probably a rounding bug in one particular version of whatever font rendering engine that WebkitGTK+ uses. Heck, I wouldn't be surprised if the bug went away if you ran the previewer on a different platform (or even on a 32-bit CPU instead of a 64-bit CPU).

Hi:

Nope, not at all (faint outline). If it was an outline thing, I'd likely have ignored it. I mean...I've mentioned this type of oddball behavior here before, poss. not in this thread or hell, even this particular sub-forum. If you can recall the HP movies, with that newspaper, and how the letters would go floating about, rearranging themselves on the paper? It's more like that. It looks like the letters come "unstuck" from the page/screen, and move about. (See attached). I have better views of it, on my desktop box, but they're also more indicative of the book itself, and the client wouldn't be happy about that.

I'm in constant email to/fro with Amazon about it. They're aware of the behavior. The problem is, now, there's apparently no way to know, EXACTLY, what the outcome is/will be, if we proceed with this looking as it does, unless/until the book goes on sale. (That's a whole other topic, and I haven't decided whether to kvetch about it here or not.)

It only displays on the Voyage emulator. Both--desktop and KDP. It doesn't happen on the real device. This one and the client's next (both with the same layout and fonts) are both on pre-order, so...I really, really hope that the bloody thing is working. This particular client will not be a happy bunny if either a) the font is "melting" or b) the font doesn't work in the book.

Hitch

[GrannyGrump]

@Ruben --- Thank you for the thought. Tthat is how I format for epub. But I remember reading (maybe one of Hitch's old posts) that KF7 OLD MOBI images must be sized in PIXELS. So I use pixels for the mobi.

@Hitch --- another weirdness for the Previewer. If I select the Voyage and then view the images, they are indeed left-aligned. But if I select the Kindle DX FIRST (which displays the image centered), and jump directly to the Voyage while that image is still displayed, the Voyage shows it centered as well, also all the other images in the book then display centered. So I am almost certain this is a bug in the Previewer.

However, I would be most grateful if you would confirm if the css and markup for images must use pixels rather than percentages.

gG

[RbnJrg]

Originally Posted by GrannyGrump

@Ruben --- Thank you for the thought. Tthat is how I format for epub. But I remember reading (maybe one of Hitch's old posts) that KF7 OLD MOBI images must be sized in PIXELS. So I use pixels for the mobi.

Hi Granny;

Yes, that is true for kf7. But your issue is with Kindle Voyage, ¿or not ? If your problem is with KV then you can use @media queries in order to set different images styles for KV (that support "width" in percentage) and KF7 (here you don't need to do anything because things work well).

For example you can do something like:

@media not amzn-kf8 {   /* Of this way, styles also will work for epubs */
img.kf8, p.kf8 {
        display: none;
}

img.kf7 {
        display: inline;
        text-align: center;
        text-indent: 0;
}
}

@media amzn-kf8 {
img.kf8 {
       width: 80%;
       height: auto;
       text-align: left;
       text-indent: 0;
       margin-left: 10%;
       margin-right: 10%
}

img.kf7, p.kf7 {
        display: none;
}
}

and in the .xhtml files:

<p class="kf8"><img class="kf8 alt="" src="../Images/my_image.png"/></p>
<p class="kf7"><img class="kf7 alt="" src="../Images/my_image.png" width="xxx"/></p>

As you can see, you code twice the images but only one of them will be displayed.

Regards
Rubén

[Hitch]

Originally Posted by GrannyGrump

@Ruben --- Thank you for the thought. Tthat is how I format for epub. But I remember reading (maybe one of Hitch's old posts) that KF7 OLD MOBI images must be sized in PIXELS. So I use pixels for the mobi.

Oh, yes, GG, I'm sorry--I'm in the middle of a very, very minor medical thing, that takes some weeks, and it's making me half-brain-dead. (NO cracks from you lot!!!). I saw this request, and then promptly forgot it, even though I had every intention of replying. I see that the wondrous Rubén has filled in, thanks, Rubén!

@Hitch --- another weirdness for the Previewer. If I select the Voyage and then view the images, they are indeed left-aligned. But if I select the Kindle DX FIRST (which displays the image centered), and jump directly to the Voyage while that image is still displayed, the Voyage shows it centered as well, also all the other images in the book then display centered. So I am almost certain this is a bug in the Previewer.

At the moment, we have a LOT of weirdnesses for Voyage that purportedly and allegedly are all the Previewer, and NOT the actual devices--I hope. That's what the conversions team at Amazon is saying to me.

Could this aberrant behavior also be caused by the location of the link? I know, I know, this sounds whacky, but...GG, is this on this same book?

However, I would be most grateful if you would confirm if the css and markup for images must use pixels rather than percentages.

gG

As Ruben confirms, below, the answer is YES, you are stuck using pixels for all KF7 devices. They don't actually HAVE CSS, as crazy as that sounds, so you must define the area (h/w) for the image in hard-coded pixels.

Ruben is correct when he says that the Voyage is a KF8, though, and thus, ought to obey typical KF8 coding. (Famous last damn words, mind you). Is this the same book and same device, or are you asking about another, and Rubén and I are conflating, here?

Originally Posted by RbnJrg

Hi Granny;

Yes, that is true for kf7. But your issue is with Kindle Voyage, ¿or not ? If your problem is with KV then you can use @media queries in order to set different images styles for KV (that support "width" in percentage) and KF7 (here you don't need to do anything because things work well).

For example you can do something like:
[snip Ruben's lovely coding]

As you can see, you code twice the images but only one of them will be displayed.

Regards
Rubén

Yes, as long as the image is intended to display the full-width of the screen, that works. If it's 300px wide, and intended to display at 100, then, no, that won't work. You can always go extra-batty, and start using HiRes and LoRes images, but I don't wish that on my friends.

:-)

Hitch

[GrannyGrump]

@Hitch --- yup, this centering problem seems to happen on all the mobi files I have created.
More details after further experimentation (I should have done this in the first place) ---
(remember, if I jump to the Voyage directly from the KDX, it WILL DISPLAY CENTERED.)
If I page through the book to an image, it WILL DISPLAY CENTERED.
If I use the LINK in the List of Illustrations, it WILL DISPLAY LEFT-ALIGNED.
So your hunch about the link problem seems to be true.

So now, I am doubly not going to twist my brain about it --- I figure not too many folks will be using the LOI anyway. And most likely, the Voyage users would be downloading the AZW3 version, which does not have the problem, and looks better besides.
(because I upload two separate files, not a "hybrid")

Hey, hope you're feeling better soon. Tell them to give you the really good drugs, and then you won't mind even if you feel worse!

[Hitch]

Originally Posted by GrannyGrump

@Hitch --- yup, this centering problem seems to happen on all the mobi files I have created.
More details after further experimentation (I should have done this in the first place) ---
(remember, if I jump to the Voyage directly from the KDX, it WILL DISPLAY CENTERED.)
If I page through the book to an image, it WILL DISPLAY CENTERED.
If I use the LINK in the List of Illustrations, it WILL DISPLAY LEFT-ALIGNED.
So your hunch about the link problem seems to be true.

So now, I am doubly not going to twist my brain about it --- I figure not too many folks will be using the LOI anyway. And most likely, the Voyage users would be downloading the AZW3 version, which does not have the problem, and looks better besides.
(because I upload two separate files, not a "hybrid")

Hey, hope you're feeling better soon. Tell them to give you the really good drugs, and then you won't mind even if you feel worse!

GG:

Is the ePUB you uploaded the same coding as the AZW3 or MOBI file? The one uploaded on the 5th? If so, I'll dl that as soon as I get in the office, and give you a holler.

Hitch