Kindle Fire SilkBrowser Reading View CSS

Asked 18/4, 2012 at 19:40 Answered 3/11, 2012 at 6:46

html css mobile-website kindle-fire amazon-silk

Does anyone know how to correctly impletment CSS classes for the Kindle Fire Silk Browser Reading View?

The Kindle Fire 6.3 Update added a "Reading View":

With Reading View on Silk, the content that you're interested in is elevated above the clutter in a reading-optimized, single screen view (even for multi-page articles). The full page is still available in the background, allowing you to easily toggle back to a traditional view to see other interesting features on the page.

I check one of my sites and it rendered a <div style="display:none;"> as the reading view article and I haven't been able to find details on how to direct the silk browser to the section that should be displayed in reading view.

Code Sample:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en">

<head>
  <title>Title</title>
</head>

<body>

<div id='content'>
  //important article here
</div>

<div id='sidebar'>
   //less important menu here
</div>

<div style='display:none;'>
   //lightbox HTML here, not important on mobile devices
</div>

</body>

</html>

I will update if I find any documentation.

Profitable answered 18/4, 2012 at 19:40 Comment(3)

I've contact amazon directly... nothing I do seems to act consistantly – Profitable 19/4, 2012 at 16:36

not even the new hidden html5 attribute? – Dorcy 25/10, 2012 at 22:8

@deathApril I haven't checked into the hidden attribute... I'll do some more testing – Profitable 28/10, 2012 at 18:26

I don't have any experience with this on the Kindle Fire Silk Browser, BUT I do know that the iPhone has the reader function based on semantic HTML and not CSS. If you use a semantic layout like

<h1>header</h1>
<h2>some text</h2>
<p>a paragraph</p>

Then the reader function will show this appropriately. It's also important to note that CSS styles are disabled, and the visual layout is instead a standard for the device aimed at improving readability. I'm not sure you can directly affect the style of this view without hard-coding this in the operating system.

Halidom answered 23/5, 2012 at 21:59 Comment(0)

a quick and dirty solution would be to add elements that should not be displayed (or spoken) by a reader throught javascript or jQuery

Dorcy answered 25/10, 2012 at 22:17 Comment(1)

that's what I've resorted to. I would be nice if there was some documentation to follow – Profitable 28/10, 2012 at 18:27

Try using media queries, it's possible that the kindle looks that the print version of a website, so if you create a media query for print as well as the standard screen then it may work.

Templin answered 3/11, 2012 at 6:46 Comment(1)

As of 1/21/13 media queries have mixed success... I can 'fix' my sites for Kindle Fire's Reading View, but sometime it will still display the wrong <div> – Profitable 21/1, 2013 at 23:50

Recommended topics

Hot tags