Kindle Fire SilkBrowser Reading View CSS

Question

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.

I've contact amazon directly... nothing I do seems to act consistantly — taylorjes, Apr 19 '12 at 16:36
not even the new [hidden](http://stackoverflow.com/q/6708247/1176601) html5 attribute? — Aprillion, Oct 25 '12 at 22:08
@deathApril I haven't checked into the hidden attribute... I'll do some more testing — taylorjes, Oct 28 '12 at 18:26

score 1 · Answer 1 · answered May 23 '12 at 21:59

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.

score 0 · Answer 2 · answered Oct 25 '12 at 22:17

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

answered Oct 25 '12 at 22:17

Aprillion

21,510
5
55
89

that's what I've resorted to. I would be nice if there was some documentation to follow – taylorjes Oct 28 '12 at 18:27

score 0 · Answer 3 · answered Nov 03 '12 at 06:46

0

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.

answered Nov 03 '12 at 06:46

Hydrox24

340
3
9

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 `
`
– taylorjes Jan 21 '13 at 23:50

Kindle Fire SilkBrowser Reading View CSS

3 Answers3