images not displayed in iBooks and ADE

[xmlgirl]

images display in Calibre and on the chrome browser.
only one repeated image works in ibooks and it has different CSS, so it must be something with the CSS.
ADE is a mess, most images don't display, but some are floating under the text.

div.fig {
margin: 0 0 1em 1em;
display: table;
float: right;
page-break-inside:avoid;
}

div.fig p {
display:table-caption;
caption-side:bottom;
text-align: center;
margin-top:2px;
font-size: 0.75em;
font-family:Verdana, sans-serif;
}

<div class="fig">
<img alt="photo" src="../Images/photo.jpeg" />
<p>caption</p>
</div>

thank you for your help!

[Hitch]

Originally Posted by xmlgirl

images display in Calibre and on the chrome browser.
only one repeated image works in ibooks and it has different CSS, so it must be something with the CSS.
ADE is a mess, most images don't display, but some are floating under the text.

div.fig {
margin: 0 0 1em 1em;
display: table;
float: right;
page-break-inside:avoid;
}

div.fig p {
display:table-caption;
caption-side:bottom;
text-align: center;
margin-top:2px;
font-size: 0.75em;
font-family:Verdana, sans-serif;
}

<div class="fig">
<img alt="photo" src="../Images/photo.jpeg" />
<p>caption</p>
</div>

thank you for your help!

Do the illustrations that are not working happen to all be styled as "display:table," by any chance?

Hitch

[xmlgirl]

Hitch - yes they are display: table-caption - is that my ADE/iBooks problem? That was the only way I could figure out how to keep the caption with the table. Is there a better way that will work on Calibre, ADE, iBooks?
Thank you!

[Hitch]

Originally Posted by xmlgirl

Hitch - yes they are display: table-caption - is that my ADE/iBooks problem? That was the only way I could figure out how to keep the caption with the table. Is there a better way that will work on Calibre, ADE, iBooks?
Thank you!

Hi:

There is nothing--save yourself the brain-damage now--that will keep captions together with anything. Images, figures, tables. If you can, you could make a table CELL, that would contain the caption; but as far as I know, the faux-property of "display:table" doesn't work in any eBook reader, ePUB or MOBI.

If you put an image in a two cell table--one column wide--even THAT won't prevent the caption breaking from whatever it's beneath (above, etc.). eBooks simply aren't to that point yet. We use "break:avoid" (for whatever--divs, yadda), but that's to future-proof them. Someone will no doubt pipe up here and say that "such-and-such" supports that, but most don't.

AND, I strongly suspect that's why your display is messed up.

Hitch

[dgatwood]

Originally Posted by Hitch

There is nothing--save yourself the brain-damage now--that will keep captions together with anything.

Except to make the caption part of the image, of course, e.g. with SVG. Of course, if you use SVG, you'll be limited to readers that support SVG. That should include most modern readers, but won't work with pre-KF8 Kindle models.

[Hitch]

Originally Posted by dgatwood

Except to make the caption part of the image, of course, e.g. with SVG. Of course, if you use SVG, you'll be limited to readers that support SVG. That should include most modern readers, but won't work with pre-KF8 Kindle models.

Yes, of course. I'm not that crazy about incorporating images of text instead of text, but yes, that's a way to get around the issue.

Hitch

[crutledge]

Originally Posted by dgatwood

Except to make the caption part of the image, of course, e.g. with SVG. Of course, if you use SVG, you'll be limited to readers that support SVG. That should include most modern readers, but won't work with pre-KF8 Kindle models.

Incorporating captions into images is simple if you have the tools (photoshop, gimp, others). These images can be jpg or png and should be fine on any reader. However, the learning curve can be steep. It's probably not worth the effort for someone not doing a lot of images.

[goldilocks]

Originally Posted by crutledge

Incorporating captions into images is simple if you have the tools (photoshop, gimp, others). These images can be jpg or png and should be fine on any reader. However, the learning curve can be steep. It's probably not worth the effort for someone not doing a lot of images.

I tried some of these tools and you're right - they have a steep learning curve. I just didn't want to take the time for them....

So, if I only want to add a caption to a picture I import the picture into PowerPoint, add the caption, group the picture and caption together and save it as a new picture (always keep the original!). I have seen no loss of quality (of course my eyesight isn't so great ).

[crutledge]

Originally Posted by goldilocks

I tried some of these tools and you're right - they have a steep learning curve. I just didn't want to take the time for them....

So, if I only want to add a caption to a picture I import the picture into PowerPoint, add the caption, group the picture and caption together and save it as a new picture (always keep the original!). I have seen no loss of quality (of course my eyesight isn't so great ).

Thats pretty slick.

I hadn't considered PowerPoint. There is no end To ingenuity.

[Turtle91]

If anyone needs an example of the SVG method mentioned above:

<body style="background-color:black">
    <div style="margin:0; padding:0; text-align:center">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 881 1500" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      
      <image height="1500" width="881" xlink:href="../Images/map.jpg" />

      <text text-anchor="middle" x="50%" y="40" style="fill:white; font-size:50px; font-family:serif">Caption</text>
     
  </svg>
  </div>
</body>

I have the code set as a template. I just correct the name of the file and the caption, and, if needed, change the font-size, y=, and image dimensions. Remember to add room for the caption to the image/viewbox heights.

Cheers!

[dgatwood]

The nice thing about SVG is that most recent readers let you search for text inside an SVG image (unlike, for example, text in a bitmap image). So it is almost as nice as incorporating it into the outer HTML; the only cost is a little extra markup complexity, plus the need to include two copies of the image markup and caption text/markup if you're producing content for Kindle because KF7 readers can't grok SVG. (This is where writing a few lines of actual software code can be helpful.)

[Notjohn]

Originally Posted by dgatwood

... KF7 readers can't grok SVG. (This is where writing a few lines of actual software code can be helpful.)

So what happens when the KDP conversion reverse-engineers the CSS for the Mobi 7 devices? I use Sigil to create an epub, which I upload to the KDP, and Sigil by default puts the cover image in an SVG wrapper, thus:

<div style="text-align: center; padding: 0pt; margin: 0pt;">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 800 1169" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="1169" width="800" xlink:href="../Images/bookcover.jpg" /></svg>

[dgatwood]

Originally Posted by Notjohn

So what happens when the KDP conversion reverse-engineers the CSS for the Mobi 7 devices? I use Sigil to create an epub, which I upload to the KDP, and Sigil by default puts the cover image in an SVG wrapper, thus:

<div style="text-align: center; padding: 0pt; margin: 0pt;">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 800 1169" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="1169" width="800" xlink:href="../Images/bookcover.jpg" /></svg>

I'm not quite sure what you're asking. You wrap the SVG in something like:

<span class="kf8only">...</span>

where that class is defined using @media queries to be display: none for media type amzn-mobi7. So the SVG isn't present in the MOBI slice when Kindlegen emits it.

And you do the same thing in reverse for the fallback content, making it hidden for media type not amzn-mobi7.

On the Mobi7 slice, obviously you don't have SVG, so you can't guarantee that the caption will be on the same page as the image, but there's not much you can do about that.

[Notjohn]

I think I have ventured into territory above my pay grade....

[dgatwood]

Originally Posted by Notjohn

I think I have ventured into territory above my pay grade....

It's not that hard. Just take a look here:

https://wiki.mobileread.com/wiki/KF8#CSS_Tips