03-22-2014, 02:53 PM | #1 |
Member
Posts: 86
Karma: 12586
Join Date: Nov 2012
Device: Ipad and Kindle Fire
|
Media Queries for images as dropcaps in Kindle DX
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? |
03-22-2014, 03:38 PM | #2 | ||
Grand Sorcerer
Posts: 5,584
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
|
Quote:
For more information see the Kindle Publishing Guidelines. Quote:
Code:
@media amzn-mobi { span.kf8 {display: none;} } @media amzn-kf8 { span.mobi {display: none;} } The preview is accurate. AFAIK, Small Caps require at a bare minimum a Kindle 3 with firmware 3.3 or higher. |
||
Advert | |
|
03-22-2014, 03:52 PM | #3 | |
Wizard
Posts: 1,548
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
In your css file, write: Code:
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; } } Code:
<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> Regards Rubén Last edited by RbnJrg; 03-22-2014 at 03:57 PM. |
|
03-22-2014, 05:35 PM | #4 |
Member
Posts: 86
Karma: 12586
Join Date: Nov 2012
Device: Ipad and Kindle Fire
|
Wow! Thanks for those very thorough and quick replies
|
Tags |
drop caps, formatting, kindle dx, media queries, small caps |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Media Queries | eggheadbooks1 | Kindle Formats | 4 | 12-16-2013 02:32 AM |
Epub to mobi not recognizing media queries | srascal | Conversion | 2 | 03-25-2013 05:19 PM |
Calibre and Media Queries | chrlsdrwn12 | Calibre | 0 | 12-05-2012 11:16 AM |
Media Queries on Kindle Previewer | AIR-WIZZ | Kindle Developer's Corner | 26 | 10-15-2012 10:10 AM |
Kindle Fire woes... indent and media Queries | Oxford-eBooks | Kindle Formats | 11 | 04-10-2012 10:08 PM |