How does Safari Reader work in Apple Safari 5? How do I enable Safari Reader on my site. How do I tell it what content on my page is an article to trigger this function?
+1
A:
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.
yrn1
2010-06-08 16:07:31
I use `<article>` on my site and Reader works there, e.g. http://mathiasbynens.be/notes/html5-levels but not on smaller articles, e.g. http://mathiasbynens.be/notes/document-head The use of `<article>` doesn’t seem to have anything to do with it.
Mathias Bynens
2010-06-10 09:43:31
Any wrapper element will do — `<div>`, `<article>`, `<section>`… Even weird stuff like `<nav>`, `<aside>` or `<span>` work fine. Read more here: http://mathiasbynens.be/notes/safari-reader
Mathias Bynens
2010-06-10 12:02:59
+4
A:
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.
tantran
2010-06-08 16:46:05
+1
A:
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.
+2
A:
This question (http://stackoverflow.com/questions/2999600/how-to-disable-safari-reader-in-a-web-page) has more details. Copied here:
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 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.
yrn1
2010-06-09 09:08:10
Incorrect. Heading elements are not required for Reader to work. Example: http://mathiasbynens.be/demo/safari-reader-test-3 Read more here: http://mathiasbynens.be/notes/safari-reader
Mathias Bynens
2010-06-10 12:01:24
A:
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.
Marc
2010-06-09 21:31:20
`<article>` is a valid wrapper recognized by Safari Reader and it works fine. See my comment on this answer for some examples: http://stackoverflow.com/questions/2997918/how-to-enable-safari-reader-on-my-website/2999102#2999102
Mathias Bynens
2010-06-10 09:44:40
I perhaps wasn't clear; I meant that <article> is not treated any differently than a regular <div>; I was hoping that if Reader saw an <article> tag it would treat the contents as if they were of one block, which it doesn't unless the contents conform to its other requirements. Upshot for me is that because my <article> contains several <section> and <div> Reader only grabs a single contained <section>.
Marc
2010-06-10 21:35:47
+7
A:
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
Mathias Bynens
2010-06-10 12:11:43
A:
I am working on algorithms for cleaning web-sites from information "waste" similar to Safari Reader feature. It's not so good as readability but has some cool stuff.
You can learn more at smartbrowser.codeplex.com project page.
sashaeve
2010-06-12 14:57:00