发表新帖
发表新帖

How to enable iOS 5 Safari Reader on my website?

后端 未结
关注
11 2542
故里飘歌
故里飘歌 2020-11-28 18:48

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?<

相关标签:
11条回答
  • 再見小時候
    2020-11-28 19:39

    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

    0 讨论(0)
  • -上瘾入骨i
    2020-11-28 19:49

    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)
    0 讨论(0)
  • 离开以前
    2020-11-28 19:51

    See Article Publishing Guidelines.

    Here are APIs about how to read and parse: Readability Developer APIs. There's already a project you can refer: ruby-readability.

    A brief history: The Safari Reader feature since Apple's Safari 5 browser embeded a codebase named Readability, and Readability started off as a simple, Javascript-based reading tool that turned any web page into a customizable reading view. It was released by Arc90 (as an Arc90 Lab experiment), a New York City-based design and technology shop, back in early 2009. It's also embeded in Amazon Kindle and popular iPad applications like Flipboard and Reeder.

    0 讨论(0)
  • 旧时难觅i
    2020-11-28 19:52

    This question (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.

    0 讨论(0)
  • 無奈伤痛
    2020-11-28 19:55

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题