Media Queries for images as dropcaps in Kindle DX

[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?

[Doitsu]

Originally Posted by verydeepwater

You can insert images as dropcaps in KF8, and float the text around it.

Not only can you insert images as dropcaps, you can actually format embedded fonts as dropcaps.
For more information see the Kindle Publishing Guidelines.

Originally Posted by verydeepwater

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?

You can use custom Kindle media queries. For example:

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

For more examples see the Kindle Publishing Guidelines.

Originally Posted by verydeepwater

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?

The preview is accurate. AFAIK, Small Caps require at a bare minimum a Kindle 3 with firmware 3.3 or higher.

[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

[verydeepwater]

Wow! Thanks for those very thorough and quick replies