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, increase score by sqrt(length - 140)
  • if cumulative score > 20, return true

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

Tags:

Firefox

Firefox Reader View

Recent Posts