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?
When you find an article on Safari you'd like to have the iOS read aloud to you, click on the “AA” in the address bar. Here you'll see a choice to pick Show Reader View (Sometimes that choice will be greyed out if the page is still loading, though occasionally it will stay grey and not offer Reader View mode).
Go to the web page you want to read and click the Toggle reader view icon in the address bar or press F9. The Toggle reader view icon turns blue, and Firefox removes all the extra items on the page and centers the text and images in the article for better readability.
Tap the Reader button on the right of the address bar. It looks like a series of stacked lines. Double Tap it again to turn it off when you want access to more of the page. If the Reader button doesn't appear it means the page isn't able to be simplified.
Summary: Go to Settings > Screentime and turn Safari to ON or OFF.
A lot of the answers posted here contain false information. Here are some corrections/clarifications:
The <article>
element works fine as a wrapper; Safari Reader recognizes it. My site is an example. It doesn’t matter which wrapper element you choose, as long as there is one, other than <body>
or <p>
. You can use <article>
, <div>
, <section>
; or elements that are semantically incorrect for this purpose, like <nav>
, <aside>
, <footer>
, <header>
; or even inline elements like <span>
(!).
No headings are required for Reader to work. Here’s an example of a document without any <h*>
elements on which Reader works fine: http://mathiasbynens.be/demo/safari-reader-test-3
I posted some more details regarding my findings here: http://mathiasbynens.be/notes/safari-reader
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With