Optimize website to show reader view in Firefox
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, increasescore
bysqrt(length - 140)
- If
- if cumulative
score
> 20, returntrue
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