Media Queries for Kindle Devices

  • Sumo

Ever wanted to treat the appearance of an ebook on a Paperwhite different from its appearance on a Kindle Fire? You’ll need to use media queries. Here’s a quick list of media queries to specify Kindle devices (and explanation of what each query is doing).

Interested in learning more about what a media query is and does? Read our previous post on the topic here.

The Basics: KF8 vs Mobi7

The basic media query for Kindle devices is one that allows different CSS for KF8 devices vs. Mobi-7 devices. The separate media queries look like this:

@media amzn-kf8 {
    /* CSS for KF8 devices */
}
@media amzn-mobi7 {
    /* CSS for Mobi7 devices */
}

Here’s a basic example of how to use these queries. (this comes directly from Kindle’s Guidelines).

/* HTML */
<p class="para"><span class="dropcaps">T</span>here is a sample</p>

/* CSS */ 
@media amzn-kf8 { 
  span.dropcaps { 
    font-weight:normal; 
    font-size:320%; 
    float:left; 
    margin-top:-0.3225em; 
    margin-bottom:-0.3245em;
  }
} 
@media amzn-mobi { 
  span.dropcaps { 
    font-size:3em; 
    font-weight: bold; 
  } 
}

These media queries have one special benefit that other media queries do not: kindlegen, the process that converts an EPUB to a .mobi file, will actually strip out content using these queries. This can be used as a way to alter HTML content between the two different formats.

Advanced: Specific KF8 Devices

Now we’ll move into some murkier territory: media queries specifically created for each KF8 device. The main purpose of these media queries is to target a specific device with CSS that will not affect other devices. You might use this to add color to a Kindle Fire tablet, or to work around a specific device bug. Thanks to Matthew Diener/Peter Hatch and John Cavnar-Johnson for previous posts on these topics that have led to these media queries.

Paperwhite

Let’s start with the Paperwhite. Despite the specs on Amazon’s site, it seems that Amazon has chosen the height and width of the device arbitrarily. Using the tests John Cavnar-Johnson provided, I came up with the dimensions of 758px on the shorter side and 1024px on the longer. So our media query is this:

@media screen
  and amzn-kf8
  and (device-height:1024px)
  and (device-width: 758px) {
}

I’ll explain these piece-by-piece. First, we use the amzn-kf8 query to make sure no other e-reader gets these styles (its possible—somewhere in this world—that there’s a device with the same height and width as the Paperwhite). Then we check for the device height and width that matches the Paperwhite. Note that this only works for the Paperwhite when it is in portrait orientation, so we need to include another query for landscape as well to be safe.

@media amzn-kf8
  and (device-height: 1024px)
  and (device-width: 758px),
  amzn-kf8
  and (device-height: 758px)
  and (device-width: 1024px){
}

non-Paperwhite Kindle

The non-Paperwhite Kindle uses a slightly different set of dimensions. Again, I don’t think that these are accurate for the device, but instead are built-in shorthands for the devices as a way to use media queries (it’s actually nice of Amazon to do that, even if these numbers seem off).

@media amzn-kf8
  and (device-height: 800px)
  and (device-width: 600px),
  amzn-kf8
  and (device-height: 600px)
  and (device-width: 800px){
}

Kindle Fires

Here’s where things get a little strange. Since there are many different sizes and resolutions of Kindle Fires, it initially seemed like a complex combination of queries to target the all of the Kindle Fires. But building off of the test that Matthew Diener and Peter Hatch created, I was able to find a shortcut. Here it is.

@media amzn-kf8
  and (device-aspect-ratio:1280/800) {
}

Currently, only Kindle Fires respond to the device-aspect-ratio. Even stranger, it responds true to a wide arrange of ratios (1280/800 or 800/1280 regardless of orientation, 1200/600, etc). To be safe, this is the ratio of the current Kindle Fires—this way if another device does begin to support device-aspect-ratios this should still be correct for the current devices.

A Note about Kindle Previewer

If you try to test many of these media queries in the Kindle Previewer app, they probably won’t work. This seems to happen because the device-width and device-height are not emulated in the Kindle Previewer, so they return false when applied. Testing on the actual devices, however, does seem to show that they work.

And there you have it. If you do use these, let me know how you use them. Having media queries available to the wide array of devices can only make Kindle ebook look that much better.

12 Responses to “Media Queries for Kindle Devices”

  1. This differing and unreported specs for Kindle devices illustrate what I suspect are the differing mindsets at Amazon and Apple. The hinge on the fact that, without a clear spec to write to, it’s hard to make something look good.

    * Apple has been careful with their screen sizes and aspect ratios because to make an app or document within an app look, you need to take those into account.

    * By your description, Amazon could apparently care less. For Amazon, all books are novels, just lengthy strings of words and paragraphs. No carefully planned formatting and layout is required. Only sales matter. Ugly is OK.

    What you’ve describe is an attempt to work around that indifference with technical fixes. I can understand your motivations, but there’s also a case to be made that, if Amazon isn’t willing to labor to encourage good-looking books on its devices, then maybe books should look ugly and customers who care should buy from someone else. Then Amazon would have a reason to change.

    And keep in mind what a series of stories at Gawker have revealed, Amazon employees are horribly overworked and turnover is high. They have little opportunity to ask, “How can we do this better?”

    http://gawker.com/amazon-insiders-tell-the-good-the-bad-and-the-ugly-1570866439

  2. Peter says:

    I’m not convinced that this is supported. I’ve tried this before and just had the device ignore those parts of my CSS. Has there been some kind of update? Could you please add screenshots and/or a sample .mobi for review. Thx

  3. Derrick Schultz says:

    I’ll add a sample file in the coming days. Thanks for the suggestion.

  4. Hitch says:

    I’m with Peter on this–most of that is utterly unsupported consistently across the devices. I wish it was. You can write the CSS, but most of it won’t function in completed MOBI/KF8 files reliably. The PPW is a big issue. And once you get to K4iOS, it gets really hairy.

  5. John says:

    FYI, Apple doesn’t document that neither and the media queries are such a mess that they are just unusable.

    As a matter of consequence, your whole comment is wrong. Thanks for your consideration.

  6. Aaron says:

    Is there a way to media query the screen modes such as Day/Sepia/Night modes? As an example, if you have a black transparent PNG on a page in Day/Sepia mode you could then have a white transparent PNG show in it’s place in night mode. Probably not the best example, but it would be nice to be able to reference the background modes in media queries.

  7. Robert Nagle says:

    Is there a media query which targets the kindle app on ios? (sideloaded through itunes). I’m particularly worried about later ipads where image widths might be a problem. On 8.1.4 of the Kindle Formatting Guide they use @media (device-width: 768px) {}, but I’m unclear if this is supposed to target Kindle for ipads or just ibooks for ipads (i.e., an example of css code which is ignored by Kindles).

  8. Kevin Callahan says:

    I think the MQ you cite is for the Kindle app on iPad; Kindle Guidelines wouldn’t have any reason to give iBooks MQs.

  9. Chris Wait says:

    Just spent half a day between here and Kindle Publishing guidelines, trying to get a MQ to detect Kindle Fire landscape mode, no dice. These do work between KF8 and paperwhite, though.

  10. Bob Ray says:

    I’ve had good luck with these:

    /* Fix for Kindle Fire HDX */
    @media (-webkit-min-device-pixel-ratio: 2) and (min-width: 1600px),
    (min-resolution: 172dpi) and (min-width: 1600px) {
    body {
    font-size: 200%;
    }
    }

    /* Kindle Fire */
    /* Kindle Fire */

    @media only screen and (min-width: 1200px)
    and (max-device-width: 1600px)
    and (-webkit-device-pixel-ratio: 2.0) {
    body {
    font-size: 200%;
    }
    }

  11. […] it can’t handle sophisticated formatting at all. There are some things that you can do (involving media queries) that will allow you to format the same file differently for old (MOBI7) and new (KF8) Kindles; […]

  12. […] here and here. And for Kindle Fire see […]