title: How to disable Safari Reader in a web page
body: <p>I'm curious to know more about what triggers the Reader option in Safari and what does not. I wouldn't plan to implement anything that would disable it, but curious as a technical exercise.</p>
  
  <p>Here is what I've learned so far with some basic playing around:</p>
  
  <ul>
  <li>You need at least one <em>H</em> tag</li>
  <li>It does not go by character count alone but by the number of P tags and length</li>
  <li>Probably looks for sentence breaks '.' and other criteria</li>
  </ul>
  
  <p>Safari will provide the 'Reader' if, with a <em>H</em> tag, and the following:</p>
  
  <ul>
  <li>1 <em>P</em> tag, 2417 chars</li>
  <li>4 <em>P</em> tags, 1527 chars</li>
  <li>5 <em>P</em> tags, 1150 chars</li>
  <li>6 <em>P</em> tags, 862 chars</li>
  </ul>
  
  <p>If you subtract 1 character from any of the above, the 'Reader' option is not available.</p>
  
  <p>I should note that the character count of the <em>H</em> tag plays a part but sadly did not realize this when I determined the results above. Assume 20+ characters for <em>H</em> tag and fixed throughout the results above.</p>
  
  <p>Some other interesting things:</p>
  
  <ul>
  <li>Setting <code>&lt;p style="display:none;"&gt;</code> for <em>P</em> tags removes them from the count</li>
  <li>Setting <code>display</code> to <code>none</code>, and then showing them 230ms later with Javascript avoided the Reader option too</li>
  </ul>
  
  <p>I'd be interested if anyone can determine this in full.</p>