Media Queries for Kindle Devices

• Tweet
• Email
• Sumo

• Tweet
• Email

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.