title: Optimize website to show reader view in Firefox
body: <p>Firefox 38.0.5 added a "Reader View" to the address bar:</p>
  
  <p><img src="https://i.stack.imgur.com/L6tY7.png" alt="enter image description here"></p>
  
  <p>But not all sites get this icon, It only appears when readable content page is detected. So how do I <strong>enable</strong> this for my site?</p>
  
  <p>I tried media print and an extra stylesheet for print-view, but that has no effect: </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
    @media print { /* no effect: */
      .no-print { display:none; }
    }
  &lt;/style&gt;
  &lt;!-- no effect either:
  &lt;link rel="stylesheet" href="print.css" media="print"&gt;&lt;!--  --&gt;
  &lt;/head&gt;&lt;body&gt;
  &lt;h1&gt;Some Title&lt;/h1&gt;
  &lt;img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&amp;text=This+banner+should+vanish+in+print+view"&gt;
  &lt;br&gt;&lt;br&gt;&lt;br&gt;This is the only text
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>What code snippets do I have to add into my website sourcecode so this <strong>book icon</strong> will become visible to the visitors of my site?</p>