How to enable iOS 5 Safari Reader on my website?

Question

How does the Reader function of Mobile Safari in iOS 5 work? How do I enable it on my site. How do I tell it what content on my page is an article to trigger this function?<

Answer 1

Both Firefox and Chrome have the similar plugin named iReader. Here is its project with source code.

http://code.google.com/p/ireader-extension/

Read the code to get more.

Answer 2

I was struggling with this. I finally took out the <ul> markings in my story, and viola! it started working.

I didn't put any wrapper around the body, but may have done it by accident.

Answer 3

HTML5 article tag doesn't trigger it on my tests. It also doesn't seem to work on offline content (i.e. pages saved on your local machine).

What does seem to trigger it is a div block with a lot of p's with a lot of text.

Answer 4

The p tag theory sounds good. I think it also detects other elements as well. One of our pages with 6 paragraphs didn't trigger the Reader, but one with 4 paragraphs and an img tag did.

It's also smart enough to detect multi-page articles. Try it out on a multi-page article on nytimes.com or nymag.com. Would be interested to know how it detects that as well.

Answer 5

It seems the algorithm it is based on is looking for p-Tags and it counts delimiters like "." in the innerText. The section (div) with the most points gets the focus.

see: http://lab.arc90.com/experiments/readability/

Seems to be the base for the Reader-mode, at least Safari attributes it in the Acknowledgements, see:

file:///C:/Program%20Files/Safari/Safari.resources/Help/Acknowledgments.html

Arc90 ( Readability ) Copyright © Arc90 Inc.
Readability is licensed under the Apache License, Version 2.0.

Answer 6

Surprising though it may be, it indeed does not pay any attention to the HTML5 article tag, particularly disappointing given that Safari 5 has complete support for article, section, nav, etc in CSS--they can be styled just like a div now, and behave the same as any block level element.

I had specifically set up a site with an article tag and several inner section tags, in prep for semantic HTML5 labeling for exactly such a purpose, so I was really hoping that Safari 5 would use that for Reader. No such luck--probably should file a bug on this, as it would make a great deal of sense. It in fact completely ignores most of the h2 level subheads on the page, each marked as a section, only displaying the single div that adheres to the criteria mentioned previously.

Ironically, the old version of the same site, which has neither article, section, nor separating div tags, recognizes the whole body for display in Reader.