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?
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
I've tested 100 or so variations of this on my iPhone in order to figure out what triggers this elusive Reader state. My conclusions are as follows:
Here is what I found had an impact:
- Having around 200 or more words (or 1000 characters including whitespace) in the article you want to trigger the "Reader" seems necessary
- The reader was NEVER triggered when I had less than 170 words; although it was sometimes triggered when I had 180 or 190 words.
- Text inside certain elements such as
<ol>or<ul>(that are not typically used to contain a story) will not count towards the 200 words (they will however be displayed in the reader if the reader is triggered for other reasons) - Wrapping the 200 words in a block element such as a
<div>or<article>seems necessary (that said, I'd be surprised if there were any websites where that was not already the case)
For full disclosure, here is what I found did NOT have an impact:
- Whether using a header or not
- Whether wrapping the text in a
<p>or letting it flow freely - Punctuations (ie removing all periods, commas, etc, did not have an impact)
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.