[kso]

@GrannyGrump:

Hello young lady

I'm the OP who had the question about images appearing differently in the Kindle previewers 2.9 and 3.29 (some time ago), which led to Rubén handing me the solution on a silver platter: using CSS tables.

For the moment I've decided to use this in the Kindle HTML _only_, as it's not _needed_ for EPUBs and, due to Adobe Digital Editions (ADE) readers blowing a fuse when faced with @media queries, it would actually be a limitation when using small screens such as early smartphones.

I now use full width images by default, and "only" readers reacting appropriately to @media queries see code that displays images in CSS tables for screens that are wide enough (I say "only", but in fact it works on most of the readers I tried).

In my Kindle CSS file I first have the full width image code, followed by @media queries. This works well on the devices I have access to and in both previewers 2.9 and 3.29.1.

For EPUBs I use a secondary CSS file because of ADE. As soon as ADE sees a @media query it ignores the file completely.

If I use CSS tables without @media queries ADE 3.0 totally destroys the display (it overlays all the images into a neat stack so that you see only the topmost two images and possibly fragments of the others depending on their size), and ADE 4.5 did something else that requires either a thick skin or a lot of good natured humour.

So here's the HTML code, first for EPUBs followed by Kindle's:

EPUB:

<div class="imgcatrow">
<div class="stblk62 stblkfbl">
<img class="stimgfit" src="../img/large.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
<div class="stblk38 stblkfbr">
<img class="stimgfit" src="../img/small.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
</div>
<div class="imgcatrow">
<div class="stblk38 stblkfbl">
<img class="stimgfit" src="../img/small.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
<div class="stblk62 stblkfbr">
<img class="stimgfit" src="../img/large.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
</div>

And the HTML for Kindles:

<div class="imgcattable"> <! -- Kindle only -->
<div class="imgcatrow">
<div class="stblk62 stblkfbl">
<div class="kfix"> <! -- Kindle only -->
<img class="stimgfit" src="../img/large.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
</div>
<div class="stblk38 stblkfbr">
<div class="kfix"> <! -- Kindle only -->
<img class="stimgfit" src="../img/small.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
</div>
</div>
</div>
<div class="imgcattable">
<div class="imgcatrow">
<div class="stblk38 stblkfbl">
<div class="kfix">
<img class="stimgfit" src="../img/small.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
</div>
<div class="stblk62 stblkfbr">
<div class="kfix">
<img class="stimgfit" src="../img/large.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
</div>
</div>
</div>

CSS:

Both use some utility classes such as .stblkfbl (floats an object to the left), .stblkfbr (floats right) and .stimgfit (fits an image to 100% of its wrapper. For the sake of brevity I have removed some of the settings such as margins etc.


EPUB CSS:

.imgcatrow {
overflow:auto;
clear:both;
}
.imgcatrow .stblk38, .imgcatrow .stblk62 {
width:100%;
clear:both;
}

EPUB CSS with @media queries:

/* this file is loaded by EPUB only, but ignored by adobe digital editions */
/* and readers based on Adobe's RMSDK because they dont't do @media queries. */

@media all and (min-width: 480px) {
.imgcatrow .stblk38 {
width:36%;
}
.imgcatrow .stblk62 {
width:60% !important;
}
.imgcatrow .stblkfbl.stblk62 {
margin-right:2% !important;
}
.imgcatrow .stblkfbr.stblk62 {
margin-left:2% !important;
}
.imgcatrow .stblkfbl, .imgcatrow .stblkfbr {
clear:none;
}
}

Kindle CSS:

@media amzn-kf8 {
.imgcattable {
display: table;
width: 100%;
}
.imgcatrow {
display:table-row;
}
.imgcatrow .stblkfbl, .imgcatrow .stblkfbr {
display:table-cell;
vertical-align:top !important;
float:none !important;
}
.imgcatrow .stblk62 {
width:60% !important;
}
.imgcatrow .stblk38 {
width:38% !important;
}
.imgcattable img {
display:block !important;
width: 100%;
}
span.stblkcaption {
display:block;
}
}

Klaus