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

It looks like a quite complex algo the one adopted by Safari reader. I guess something more simple sticks behind this. Most probably a well W3C document with some SEO best practice like the one you mentioned.

I believe something like this:

1. At least an H1
2. <p> tags open and closed, and properly following each heading tags
3. a general containing layer

Most probably the reader is looking for something close to the new HTML 5 specific, so a class caller article or something like that.

It's interesting to understand why Apple didn't disclose anything about this.

Answer 2

According to The Register, Safari Reader is based on the open source project Readability. You might be able to look through the code for clues.

Answer 3

See http://code.google.com/p/arc90labs-readability/source/browse/trunk/js/readability.js for "the code" for readability.

Answer 4

“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.