[RbnJrg]

Originally Posted by verydeepwater

You can insert images as dropcaps in KF8, and float the text around it. I have just realised that it is not only Kindles 1 and 2 that don't support KF8 but the much more recent Kindle DX as well. So my question is: is there a way to use media queries to be able to make the images appear as dropcaps in KF8 and for a large letter to replace the images in mobi devices?

I know you can use media queries for different formatting of text but what about determining whether div tags containing images appear or not, and replacing them with a large first letter?

I have a related query about Small Caps. According to Kindle Previewer, small caps don't appear on mobi devices such as the DX - the text just appears as lowercase and upper case. Is this correct, or just a shortcomings of previewer?

Yes, you can do that by using the "display" property. For example:

In your css file, write:

p {
  text-align: justify;
}

@media amzn-kf8 { /* also here you could write @media not amzn-mobi */
.img_dropcap {
     display: block;
     float: left;
     width: 4em; /* or the width you want */
     height: 4em; 
     padding-right: 0.5em;
}

.letter_dropcap {
     display: none;
}
}

@media amzn-mobi {
.img_dropcap {
     display: none;
}

.letter_dropcap {
     display: inline;
     font-size: 2em; /* or the size you want */
     font-weight: bold;
}
}

And in your .html file:

<p><img class="img_dropcap" alt="" src="the path to your image here"/><span class="letter_dropcap">L</span>
orem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc.</p>

Finally, yes, small-caps are not showed in K7 devices (thas is, K1, K2 and KDX). You have to use "fake" small-caps in those devices. You can find in this forum a lot of info about how to do that. Just do a "search"

Regards
Rubén