Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to enable iOS 5 Safari Reader on my website?

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?

like image 437
bshack Avatar asked Jun 08 '10 13:06

bshack


People also ask

How do I get Safari to read aloud to my website?

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

How do I add Reader to my website?

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.

Why can't I show Reader view?

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.

How do I enable Safari on iOS?

Summary: Go to Settings > Screentime and turn Safari to ON or OFF.


1 Answers

A lot of the answers posted here contain false information. Here are some corrections/clarifications:

  1. 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> (!).

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

like image 122
Mathias Bynens Avatar answered Sep 20 '22 01:09

Mathias Bynens