Optimize website to show reader view in Firefox

Asked 9/6, 2015 at 11:7 Answered 17/11, 2017 at 21:26

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?

Jaime answered 9/6, 2015 at 11:7 Comment(1)

possible duplicate of How Does Firefox Reader View Operate (FF version 38.0.5) – Biforate 18/7, 2015 at 13:46

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

Jaime answered 10/6, 2015 at 7:47 Comment(3)

Does this still apply? I tried it and it does not trigger Firefox ReaderView option. Are there any other criteria? Like the page not being local or something? – Criticaster 17/8, 2016 at 14:26

@Criticaster if by local you mean a file:/// URL, correct. Reader Mode isn't offered for file browsing even on compatible HTML. – Ardeth 28/12, 2016 at 19:46

Note that the file:/// exclusion was originally done "for security reasons" (related to concerns about sites linking about:reader?url=file:/// URLs to do nefarious things), and now that that's been solved in other ways last word was that the Mozilla team were "open to revisiting" the file:/// URL issue. But that was over a year ago, and no revisiting has yet occurred. bugzilla.mozilla.org/show_bug.cgi?id=1166829 – Ardeth 28/12, 2016 at 23:18

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

Nilson answered 17/11, 2017 at 21:26 Comment(3)

based on this I created a small js snipped that shows I'm by far over this limit. but firefox is not showing a reader mode icon. – Flickertail 14/4, 2019 at 20:54

@Flickertail Was the page in the file system or hosted? Did you found out the cause? – Pack 1/5, 2020 at 15:43

@Pack yes, that was the reason: the button gets only active for pages requested via http. – Flickertail 2/5, 2020 at 18:16