Optimize website to show reader view in Firefox

Question

Optimize website to show reader view in Firefox

21.4k Views Asked by rubo77 At 16 April 2025 at 15:17

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?

Original Q&A

There are 2 best solutions below

ahochhaus On 17 November 2017 at 21:26

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

**rubo77** · Accepted Answer

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

Optimize website to show reader view in Firefox

There are 2 best solutions below

Related Questions in FIREFOX

Related Questions in FIREFOX-READER-VIEW

Trending Questions

Popular # Hahtags

Popular Questions