4

I would like to separate styles (colors) for e-ink Kindles and the rest. It could be quite easy if monochrome or color queries worked. As far as I know, I have to use a workaround. It is said Kindle Previewer does not support queries properly, particularly more complex queries.

I would think these two could do that, however, I am not sure.

For non-e-inks:

@media not amzn-mobi,
       not amzn-kf8 and (device-height:1024px) and (device-width:758px),
       not amzn-kf8 and (device-height:758px) and (device-width:1024px),
       not amzn-kf8 and (device-height:800px) and (device-width:600px),
       not amzn-kf8 and (device-height:600px) and (device-width:800px),
       amzn-kf8 and (device-aspect-ratio:1280/800) {
       /* COLOR VERSION for any device except Kindle e-inks */

For e-inks:

@media amzn-mobi,
       amzn-kf8 and (device-height:1024px) and (device-width:758px),
       amzn-kf8 and (device-height:758px) and (device-width:1024px),
       amzn-kf8 and (device-height:800px) and (device-width:600px),
       amzn-kf8 and (device-height:600px) and (device-width:800px) {
       /* BW VERSION for e-ink-based Kindles */

Is it possible to do that this way? It does not seem to work.

I used these two sources: 1, 2.

2 Answers 2

3

The preferred solution (and the one I use) is to create default css outside of the media query breakpoints, and then this css will apply to e-ink devices (which don't support media queries -- even the amzn-mobi one, to my knowledge)

You should check the PDF of "Amazon Kindle Publishing Guidelines" on their website. Current version is 2015.4

I think your sample code is fine; my experience has been that it is unnecessary (and cumbersome) to use amzn-mobi in your media query. You can just use generic ones and you'll be fine.

My personal experience is that this breakpoint you listed is unnecessary:

 amzn-kf8 and (device-aspect-ratio:1280/800) 

I don't have all the devices to test with, but some things I have learned is:

  1. Kindle app for android and Kindle Fire devices render things very similarly.
  2. Older e-ink devices also do an admirable job for limited hardware. The main thing you need to check is image size. The trick is to use high quality images (1000px or 1500px) in the epub/mobi file and then let the Kindle website reduce its size accordingly. Don't try to figure out the algorithm Kindle uses for shrinking images. I used to waste a lot of brain cells on that. I actually posted my tips on formatting images for kindle devices here: https://kdp.amazon.com/community/thread.jspa?threadID=291039&tstart=15
  3. Kindle for Ipad 1 and the for latest Ipads and Ipad Minis are relatively similar for the purpose of testing (aside from screen dimensions obviously).
2
  • Thanks. It seems there is no clean way how to do this, the media queries support is really cropped here. As far as I could find in AKP Guidelines, only amnz-mobi and amzn-kf8 are officially supported conditions. Who knows how the rest is treated? At the moment, I can live with that. Hope devs could add broader support in the future. Apr 13, 2016 at 11:12
  • 1
    It would make sense to support a media query that distinguishes between monochrome vs. color, and I wouldn't be surprised if the latest e-eink Kindles do so eventually. . A few years ago I think I did a test ebook comparing colors vs. how e-ink renders colors -- and it helped me to figure out which color combinations to avoid in e-ink. Apr 13, 2016 at 19:06
1

I came up with something very close to what you have, see this thread:

http://www.mobileread.com/forums/showthread.php?t=274927

The media query I have is:

/*
kindle 1/kindle 2/kindle DX, 
paperwhite portrait,
paperwhite landscape,
"other kindles" portrait,
"other kindles" landscape,
voyage portrait,
voyage landscape
*/
@media amzn-mobi,
  amzn-kf8
  and (device-height:1024px) 
  and (device-width:  758px),
  amzn-kf8
  and (device-height:758px) 
  and (device-width:1024px),
  amzn-kf8 
  and (device-height: 800px) 
  and (device-width: 600px), 
  amzn-kf8 
  and (device-height: 600px) 
  and (device-width: 800px),
  amzn-kf8 
  and (device-height: 1448px) 
  and (device-width: 1072px),
  amzn-kf8 
  and (device-height: 1072px) 
  and (device-width: 1448px) {
    p {
      ...
    }
}

Missing only the Oasis at this time. I tested it across a variety of devices and met with success. Did you test your queries on a physical device, or just the Kindle Previewer?

Note that I would be treating non-e-ink kindles as "default" here, and overriding with this query. If you wanted the stylesheet to be global, you could do non-e-ink CSS in a @media amzn-kf8 query just before this one.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.