34

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?

rubo77
  • 19,527
  • 31
  • 134
  • 226
  • 3
    possible duplicate of [How Does Firefox Reader View Operate (FF version 38.0.5)](http://stackoverflow.com/questions/30661650/how-does-firefox-reader-view-operate-ff-version-38-0-5) – Ajoy Jul 18 '15 at 13:46

2 Answers2

21

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
double-beep
  • 5,031
  • 17
  • 33
  • 41
ahochhaus
  • 392
  • 2
  • 12
  • 1
    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. – iRaS Apr 14 '19 at 20:54
  • 1
    @iRaS Was the page in the file system or hosted? Did you found out the cause? – surfmuggle May 01 '20 at 15:43
  • 1
    @surfmuggle yes, that was the reason: the button gets only active for pages requested via http. – iRaS May 02 '20 at 18:16
17

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

Muaath
  • 579
  • 3
  • 19
rubo77
  • 19,527
  • 31
  • 134
  • 226
  • 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? – FanaticD Aug 17 '16 at 14:26
  • 3
    @FanaticD if by local you mean a `file:///` URL, correct. Reader Mode isn't offered for file browsing even on compatible HTML. – FeRD Dec 28 '16 at 19:46
  • 2
    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. https://bugzilla.mozilla.org/show_bug.cgi?id=1166829 – FeRD Dec 28 '16 at 23:18