How to disable Safari Reader on a web page

Question

I am curious to know more about what the Reader parameter calls in Safari and what not. I would not have planned to implement anything that could turn it off, but it would be curious as a technical exercise.

Here is what I have learned so far with some basic games around:

• You need at least one H tag
• This is not the number of characters, but the number of P tags and length
• Probably looking for breaks in sentences. and other criteria

Safari will provide a "Reader" if with an H tag and the following:

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

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

I should note that the number of characters in the H tag plays a role, but, unfortunately, did not realize this when I determined the results above. Suppose there are more than 20 characters for the H tag and are fixed in the results above.

Some other interesting things:

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

I would be interested if anyone can fully determine this.

Answer 1

"You need at least one <h*> element" - this is simply not true. Here is an example: http://mathiasbynens.be/demo/safari-reader-test-3

My answer to another question from Safari Reader contains additional information.

You can also read my blog post about enabling Safari Reader for all of my findings on this.

Answer 2

Adding markup to potentially "readable" tags, such as p and div , can cause the Readability algorithm to ignore the tag, thereby lowering the rating, hopefully to the point that it does not cause the Reader display icon.

Looking at the source of Readability, one of the areas for this is the id and class attributes, as this is matching patterns based on combined data from these two attributes. For example, adding the class "comment", for example

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

will ignore this item. A template that matches for "unlikely" candidates:

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

Placing flags for items that can be added to the Readability metric can allow you to disable the Reader icon.

Answer 3

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

Answer 4

Here is what worked for me:

I placed all the contents inside the ol tag.

 <ol style = "padding:0;margin:0"> my content </ol> 

From what I read elsewhere, the reader is partially caused by the number of words on the page, but it does not take into account the words inside ol.

Answer 5

According to Register , Safari Reader is based on the open source Readability project . You may be able to view the code for tips.

Answer 6

Send a message: http://www.jangro.com/items/how-to-block-safari-5s-new-reader-and-bite-off-your-nose/

Answer 7

This seems like a pretty complicated algorithm that was accepted by the Safari reader. I think there is more to this. Most likely a good W3C document with best SEO practices like the one you mentioned.

I believe something like this:

• At least H1
• <p> open and close tags and correctly follow each title tag
• common containing layer

Most likely, the reader is looking for something close to the new HTML 5 , so the class’s caller’s article or something like that.

It is interesting to understand why Apple did not say anything about this.

Answer 8

I had a div inside mine that wrapped all my content. Changing this div as an element and adding a class to remove the entire add-on created with the button, deleted the reader button on my mobile site.