Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Kindle Fire SilkBrowser Reading View CSS

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.

like image 422
taylorjes Avatar asked Apr 18 '12 19:04

taylorjes


People also ask

What is reading view on Kindle Fire?

One of the new features is a reading view, which allows you to format Web articles to look like an e-book, using Amazon's Silk Web browser. Reading view can make Web content easier to read without all the ads, graphics, and other distractions.

How do you get to kindle reading view?

Open the Kindle app . Go to your Library and select a book cover for reading. While reading, tap the center of the screen to display the reading toolbar.

How do I change font size in Silk browser?

To make text larger, launch the Silk Browser from your home screen. Then pinch and zoom in or out to make the page's text and other content larger or smaller. In the following example, I pinched and zoomed it closer to make it look larger. Then go the opposite way to return it to the regular size.

Is Silk browser secure?

Amazon Silk supports TLS communication between the device client on Fire devices and origin servers. For enhanced privacy and security, TLS traffic is not routed through Silk remote proxies in the Amazon Cloud, and we don't collect any metrics regarding web page resources downloaded using TLS connections.


1 Answers

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.

like image 102
wnajar Avatar answered Oct 15 '22 01:10

wnajar