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 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
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.