How to center images in OLD mobi7 for Voyage - Page 2

Hitch · 07-12-2016, 01:33 PM

Howdy, GG:

Well, I'm amazed--my guess was right. I haven't seen this in a good while, so I didn't expect it to be.

The tl;dr answer is: it's WHERE the link targets are located, that is causing your problem.

In your file, you have (using the first illo as an exemplar):

Code:

 <a href="../Text/ch07.xhtml#cwa-01">Where roads branch or cross there are signboards....</a>
    </div>

...in which the link goes to the "cwa-01" id, in the target. At the target, you have:

Code:

<div class="illus">
    <img alt="" class="img095" id="cwa-01" src="../Images/cwa-01.jpg"/>     <div>
      WHERE ROADS BRANCH OR CROSS<br/>

      THERE ARE SIGNBOARDS….
    </div>
  </div>

The anatomy of the target being a div class that carries the "text-align:center" instruction for the div, plus some font size and margins, and the image has the "095" styling applied (a 2.5% l/r margin, a width setting in percentages and the max/min width settings).

Because we're talking mobi here, we have to read everything devoutly left-right, top-bottom. When the link at the TOI is clicked, the target jumps you PAST the styling for a centered image. So the centered styling simply isn't encountered and thus never rendered. When you page to it, the styling for the centering is encountered and rendered, before you "get there," as it were.

This was a "thing" (I hesitate to call it a bug; or even a glitch. After all, it's doing exactly what it's being told to do...) with MOBI way back, when the armies of self-pubs first started making mobi files from Word. Or even "filtered HTML." They'd set the target links for their chapter heads at or inside the heading classes, much the same as it's set in your image coding, with the centering instruction BEFORE the inbound--so when they would jump to the chapter from the TOC, the headings would be left-aligned (the default H/p styling) but when they paged to it, they'd be centered.

Does all that make sense? And isn't it nice to know that it's not whacky at all--it's not you? :-) It's just de MOBI, mon!

Hitch

GrannyGrump · 07-13-2016, 11:44 PM

Well, Hitch, it does make Mobi-Sense, I guess. My solution now is to insert an <a> tag with the id in front of the main "illus" div. This works in the Previewer, and maybe it makes the devices happier as well.

<a id="cwa-01" /><div class="illus">
<img alt="" class="img095" id="cwa-01" src="../Images/cwa-01.jpg"/>
</div>

I never intended to work with mobi at all, and started out simply uploading AZW3. But I was questioned why I never uploaded mobi, and I took the plunge. I wonder how many more mobi-mangles I will come across ...

07-12-2016, 01:33 PM	#16
Hitch Bookmaker & Cat Slave Posts: 11,462 Karma: 158448243 Join Date: Apr 2010 Location: Phoenix, AZ Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2	Yup--it's WHERE the links jump TO... Howdy, GG: Well, I'm amazed--my guess was right. I haven't seen this in a good while, so I didn't expect it to be. The tl;dr answer is: it's WHERE the link targets are located, that is causing your problem. In your file, you have (using the first illo as an exemplar): Code: <a href="../Text/ch07.xhtml#cwa-01">Where roads branch or cross there are signboards....</a> </div> ...in which the link goes to the "cwa-01" id, in the target. At the target, you have: Code: <div class="illus"> <img alt="" class="img095" id="cwa-01" src="../Images/cwa-01.jpg"/> <div> WHERE ROADS BRANCH OR CROSS<br/> THERE ARE SIGNBOARDS…. </div> </div> The anatomy of the target being a div class that carries the "text-align:center" instruction for the div, plus some font size and margins, and the image has the "095" styling applied (a 2.5% l/r margin, a width setting in percentages and the max/min width settings). Because we're talking mobi here, we have to read everything devoutly left-right, top-bottom. When the link at the TOI is clicked, the target jumps you PAST the styling for a centered image. So the centered styling simply isn't encountered and thus never rendered. When you page to it, the styling for the centering is encountered and rendered, before you "get there," as it were. This was a "thing" (I hesitate to call it a bug; or even a glitch. After all, it's doing exactly what it's being told to do...) with MOBI way back, when the armies of self-pubs first started making mobi files from Word. Or even "filtered HTML." They'd set the target links for their chapter heads at or inside the heading classes, much the same as it's set in your image coding, with the centering instruction BEFORE the inbound--so when they would jump to the chapter from the TOC, the headings would be left-aligned (the default H/p styling) but when they paged to it, they'd be centered. Does all that make sense? And isn't it nice to know that it's not whacky at all--it's not you? :-) It's just de MOBI, mon! Hitch

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Buy a Voyage or wait for Voyage 2?	leaston	Which one should I buy?	85	04-21-2016 12:40 PM
Want to Center Irregular Images with text wrap	GrannyGrump	ePub	26	04-04-2013 02:22 AM
merge MOBI7 and AZW3	gregorio	Kindle Formats	1	10-29-2012 09:02 AM
image be in the center	yuxi_kelly	ePub	2	03-19-2011 10:40 AM
How to center/fit page width SVG images with <OBJECT>	amoroso	ePub	0	07-31-2010 11:48 AM

07-13-2016, 11:44 PM	#17
GrannyGrump Obsessively Dedicated... Posts: 3,200 Karma: 34977896 Join Date: May 2011 Location: JAPAN (US expatriate) Device: Sony PRS-T2, ADE on PC	Well, Hitch, it does make Mobi-Sense, I guess. My solution now is to insert an <a> tag with the id in front of the main "illus" div. This works in the Previewer, and maybe it makes the devices happier as well. <a id="cwa-01" /><div class="illus"> <img alt="" class="img095" id="cwa-01" src="../Images/cwa-01.jpg"/> </div> I never intended to work with mobi at all, and started out simply uploading AZW3. But I was questioned why I never uploaded mobi, and I took the plunge. I wonder how many more mobi-mangles I will come across ...