Media Queries for Kindle Devices

  • Sharebar

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.

4 thoughts on “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. 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. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>