Search code examples
firefoxfirefox-reader-view

Optimize website to show reader view in Firefox

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?

Solution

  • 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