Optimize website to show reader view in Firefox

Firefox 38.0.5 added a "Reader View" to the address bar:

But not all sites get this icon, It only appears when readable content page is detected. So how do I enable this for my site?

I tried media print and an extra stylesheet for print-view, but that has no effect:

<html>
<head>
<style>
  @media print { /* no effect: */
    .no-print { display:none; }
  }
</style>
<!-- no effect either:
<link rel="stylesheet" href="print.css" media="print"><!--  -->
</head><body>
<h1>Some Title</h1>
<img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+should+vanish+in+print+view">
<br><br><br>This is the only text
</body></html>

What code snippets do I have to add into my website sourcecode so this book icon will become visible to the visitors of my site?

As the code stands in Nov '17 the trigger function (isProbablyReaderable) scores only p or pre elements and div elements that contain at least one decedent br.

A slight oversimplification of the scoring heuristic is:

For each element in ['p', 'pre', 'div > br']:
- If textContent length is > 140 chars, increase score by sqrt(length - 140)
if cumulative score > 20, return true

rubo77

You have to add <div> or <p> tags to achieve a page to iniciate the ReaderView.

I created a simple html that works:

<html><head>
<title>Reader View shows only the browser in reader view</title>
</head>
<body>
Everything outside the main div tag vanishes in Reader View<br>
<img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+should+vanish+in+print+view">
<div>
   <h1>H1 tags outside ot a p tag are hidden in reader view</h1>
   <img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+is resized+in+print+view">
   <p>
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789 123456
</p>
</div>
</body>
</html>

This is the minimum needed to activate it. This is a somewhat multi-faceted process where scores are added for text chunks.

You can for example activate the reader view in forum's software if you add a <p>-tag around each message block in the view-posts template.

Here are some more details about the mechanism

来源：https://stackoverflow.com/questions/30730300/optimize-website-to-show-reader-view-in-firefox

标签

firefox

firefox-reader-view