Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Optimize website to show reader view in Firefox

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

enter image description here

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?

like image 217
rubo77 Avatar asked Jun 09 '15 11:06

rubo77


People also ask

How do I force reader view in Firefox?

A simple Ctrl + R will force Reader View.

How do I make my website reader viewable?

Go to the web page you want to read and click the Toggle reader view icon in the address bar or press F9. The Toggle reader view icon turns blue, and Firefox removes all the extra items on the page and centers the text and images in the article for better readability.

Is reader view available on all websites?

With any open sites, the pop-up menu choice immediately enables or disables Reader View in all tabs based on your selection. In iOS and iPadOS, tap the Reader View icon and then choose Website Settings.


1 Answers

As the code stands in May '20 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
like image 168
ahochhaus Avatar answered Sep 20 '22 13:09

ahochhaus