How to disable Safari Reader in a web page

Question

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.

Here is what I've learned so far with some basic playing around:

• You need at least one H tag
• It does not go by character count alone but by the number of P tags and length
• Probably looks for sentence breaks '.' and other criteria

Safari will provide the 'Reader' if, with a H tag, and the following:

• 1 P tag, 2417 chars
• 4 P tags, 1527 chars
• 5 P tags, 1150 chars
• 6 P tags, 862 chars

If you subtract 1 character from any of the above, the 'Reader' option is not available.

I should note that the character count of the H tag plays a part but sadly did not realize this when I determined the results above. Assume 20+ characters for H tag and fixed throughout the results above.

Some other interesting things:

• Setting <p style="display:none;"> for P tags removes them from the count
• Setting display to none, and then showing them 230ms later with Javascript avoided the Reader option too

I'd be interested if anyone can determine this in full.

Answer 1

Adding markup to potentially "readable" tags, like p and div, can cause the Readability algorithm to ignore the tag, thus lowering the score, hopefully to a point that it doesn't trigger the Reader icon to display.

Looking at the Readability source, one area to do this is in the id and class attributes, as it does pattern matching on the combined data from these two attributes. For example, adding a "comment" class, like so

<p class="myClass comment">...</p> 

will cause that element to be ignored. The pattern that is being matched for "unlikely" candidates is:

/combx|comment|disqus|foot|header|menu|rss|shoutbox|sidebar|sponsor/i 

Placing flags on the elements that might add to the Readability Score can allow you to disable the Reader icon.

Answer 2

“You need at least one <h*> element” — this is simply incorrect. Here’s an example: http://mathiasbynens.be/demo/safari-reader-test-3

My answer on the other Safari Reader question provides some more info.

You could also read my blog post on enabling Safari Reader for all my findings on the subject.