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.

Should this post be merged with this one: [http://stackoverflow.com/questions/2997918/how-to-enable-safari-reader-on-my-website](http://stackoverflow.com/questions/2997918/how-to-enable-safari-reader-on-my-website) — powerboy, Jun 09 '10 at 02:26
I don't think so. I can see how they are related but triggering versus disabling is completely different. — donohoe, Jun 09 '10 at 14:12
Does anyone have a solution that works in 2017? It's relevant again because the Twitter iOS app made "Reader View" the default... — Sprachprofi, Jan 22 '18 at 16:59
Twitter having enabled Safari Reader view by default, and Safari Reader view hiding random parts of my page, makes me want to disable it, and none of the answers below work. — 2540625, Nov 27 '19 at 00:48

score 11 · Answer 1 · answered Mar 14 '13 at 19:27

11

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.

answered Mar 14 '13 at 19:27

jeffjenx

17,041
6
57
99

1

Adding one of those classes to a `div` is by far the simplest method of disabling the Reader button. Doing so wouldn't be recommended on any page that you want to be discoverable but I found this useful on a private page that I wanted to manually refresh regularly (Reader and Refresh are a little too close together). – Paul Gregory Jul 17 '13 at 11:30
@PaulGregory, what do you mean by "discoverable"? – 2540625 Nov 27 '19 at 01:27
@jtheletter I think what I meant at the time was a webpage that you wanted Googlebot to understand as a content page and index, rather than an internal webapp screen - ie if you want other robots to help people find the page, don't deliberately put stuff in that confuses algorithms. – Paul Gregory Nov 27 '19 at 13:44

score 8 · Accepted Answer · edited May 23 '17 at 12:03

8

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

edited May 23 '17 at 12:03

Community

1
1

answered Jun 10 '10 at 12:18

Mathias Bynens

144,855
52
216
248

This isn't the full Answer I was looking for but one of the more useful. Other answers below were very helpful too. – donohoe Jun 23 '10 at 15:53
For me it worked to place all content inside an ol tag. I styled it with padding:0;margin:0 so it did not affect the layout. – user984003 Oct 25 '13 at 09:09
1

I've tried all your 3 tests on Safari 11.1.1 and it seems that all of them doesn't hold true anymore. – Krzysztof Przygoda Jul 12 '18 at 17:21
2

Why is this the accepted answer? It answers how to enable Safari Reader. The question is how to disable it. – 2540625 Nov 27 '19 at 00:49

score 2 · Answer 3 · answered Jun 10 '10 at 07:22

2

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

answered Jun 10 '10 at 07:22

Vincent Flanders

21
1

score 1 · Answer 4 · answered Oct 25 '13 at 09:08

1

Here is what worked for me:

I placed all content inside an ol tag.

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

From what I read elsewhere, the reader is partly triggered by the number of words on a page, but it does not count words inside an ol.

answered Oct 25 '13 at 09:08

user984003

28,050
64
189
285

1

This is the only solution I found that works. Thank you. – Joe Huang Apr 10 '16 at 00:33
1

I just tested again, this method does not work. I think Apple somehow fixed this. Is there any other trick? – Joe Huang May 08 '16 at 13:33

score 1 · Answer 5 · edited Jun 10 '10 at 22:26

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:

At least an H1
<p> tags open and closed, and properly following each heading tags
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.

score 1 · Answer 6 · answered Jun 09 '10 at 21:59

1

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.

answered Jun 09 '10 at 21:59

pb.

187
2
8

Based on, or inspired by? I'm aware of the Readability code but was hoping to figure this out with out that. Thanks. – donohoe Jun 10 '10 at 16:59
@michael Definitely "based on", by the way. If you look at Safari's "About" box you'll see a credit for arc90... – Matt Gibson Mar 24 '11 at 10:52
Code links are dead. – 2540625 Nov 27 '19 at 01:31

score 1 · Answer 7 · edited Feb 03 '20 at 19:20

1

Check out this post: How to Block Safari 5's New Reader (And Bite Off Your Nose)

edited Feb 03 '20 at 19:20

Community

1
1

answered Oct 21 '11 at 22:04

willem

11
1

1

That post is gone. Please consider summarizing content, not just linking. – 2540625 Nov 27 '19 at 00:36

score 0 · Answer 8 · answered Apr 23 '13 at 17:23

0

I had a div inside my that wrapped all my content.. Changing this div to be a element, and adding a class to remove all padding that is created by the , removed the reader button on my mobile site.

answered Apr 23 '13 at 17:23

abelito

1,094
1
7
18

How to disable Safari Reader in a web page

8 Answers8

Linked