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?
A simple Ctrl + R will force Reader View.
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.
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.
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:
textContent
length is > 140 chars, increase score
by sqrt(length - 140)
score
> 20, return true
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With