Best IT Recipes

Optimize your website to show reader view in Firefox.

Firefox 38.0.5 added a "reader address" to the address bar:

enter image description here

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

I tried a multimedia printout and an optional print stylesheet, but this 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 fragments do I need to add to the source code of my site so that this book icon becomes visible to visitors to my site?

+17
firefox firefox-reader-view
Jun 09 '15 at 11:07
source share
2 answers

You need to add the <div> or <p> tags to get the page to indicate 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 ap 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 required to activate it. This is a somewhat multifaceted process, in which points for text fragments are added.

You can, for example, activate reader viewing in the forum software if you add <p> -tag around each message block in the notes template.

Here are some more details about the mechanism.

+8
Jun 10 '15 at 7:47
source share

Since the code is in Nov '17 , the trigger function ( isProbablyReaderable ) only clogs p or pre and div elements that contain at least one decedent br .

A slight simplification of the heuristic evaluation:

  • For each item from ['p', 'pre', 'div> br']:
    • If the textContent is> 140 characters, increase score by sqrt(length - 140)
  • if cumulative score > 20, return true
+1
Nov 17 '17 at 21:26
source share


More articles:


All Articles