如何在我的网站上启用iOS 5 Safari阅读器?

iOS 5中的Mobile Safari的阅读器function如何工作? 如何在我的网站上启用它。 我如何告诉它我的网页上有哪些内容是触发这个function的文章?

这里发布的很多答案都包含虚假信息。 以下是一些更正/澄清:

  1. <article>元素作为包装器正常工作; Safari阅读器识别它。 我的网站是一个例子 。 你select哪个包装元素并不重要,只要有一个,而不是<body><p> 。 您可以使用<article><div><section> ; 或者为了这个目的而在语义上不正确的元素,比如<nav><aside><footer><header> ; 甚至内联元素(如<span> (!))。

  2. 阅读器不需要使用标题。 下面是一个文档没有任何<h*>元素的Reader工作正常的例子: http : //mathiasbynens.be/demo/safari-reader-test-3

我在这里发布了一些关于我的发现的更多细节: http : //mathiasbynens.be/notes/safari-reader

看来,它所基于的algorithm正在寻找p-Tags,并将“。”这样的分隔符计算在内。 在innerText中。 具有最多点的部分(div)获得焦点。

请参阅: http : //lab.arc90.com/experiments/readability/

似乎是Reader模式的基础,至lessSafari将其归入致谢中,请参阅:

文件:/// C:/Program%20Files/Safari/Safari.resources/Help/Acknowledgments.html

Arc90(可读性)版权所有©Arc90 Inc.
可读性是根据Apache许可证2.0版许可的。

我已经在我的iPhone上testing了100个左右的变体,以便找出触发这个难以捉摸的Reader状态的原因。 我的结论如下:

这是我发现有一个影响:

  • 在你想触发“阅读器”的文章中有大约200个或更多的单词(或1000个字符,包括空白)似乎是必要的
  • 当我不到170字时,读者从未被触发; 尽pipe有时候我有180或190个单词时就会触发它。
  • 某些元素(如<ol><ul> (通常不用于包含故事))中的文本不会计入200个字(但是,如果读取器由于其他原因而被触发,它们将显示在阅读器中)
  • 将200个单词包含在一个块元素(如<div><article>似乎是必要的(也就是说,如果有任何网站不是这样的话,我会感到惊讶)

为了充分披露,这里是我发现没有影响:

  • 是否使用标题
  • 无论是将文本包装在一个<p>或让它自由stream动
  • 标点符号(即删除所有句号,逗号等等,没有影响)

这个问题( 如何禁用网页中的Safari阅读器 )有更多的细节。 复制在这里:


我很想知道更多关于在Safari中触发Reader选项的内容,以及什么不是。 我不打算执行任何可以禁用它的东西,但是作为一个技术练习是好奇的。

这是我迄今为止学到的一些基本的玩法:

你至less需要一个H标签它不是单独的字符数,而是P标签的数量和长度可能寻找句子'。' 和其他标准Safari将提供“读者”,如果,与H标签,以及:

1 P标签,2417字符4 P标签,1527字符5 P标签,1150字符6 P标签,862字符如果您从上述任何一项中减去1个字符,“读取器”选项不可用。

我应该注意到,H标签的字符数量起到了一部分作用,但是当我确定了上面的结果时,可悲的是没有意识到这一点。 假设H标签有20个以上的字符,并在上面的结果中固定。

其他一些有趣的事情:

P标签的设置将它们从计数设置显示中删除,然后用Javascript显示230ms,避免了Reader选项

如果有人能完全确定,我会很感兴趣。

我正在为此而挣扎。 我终于拿出了我的故事中的标记,中提琴! 它开始工作。

我没有在身体上装任何包装,但可能是偶然的。

HTML5文章标记不会在我的testing中触发它。 它也似乎不适用于离线内容(即保存在本地机器上的页面)。

似乎触发它是一个很多的文字很多的P区块。

p标签理论听起来不错。 我认为它也检测其他元素。 我们的一页6段没有触发读者,但有一个4段和一个img标签做了。

检测多页文章也足够智能。 在nytimes.com或nymag.com上的多页文章中试用。 有兴趣知道它是如何检测的。

令人惊讶的是,它确实没有注意到HTML5的文章标签,尤其令人失望,因为Safari 5完全支持CSS中的文章,部分,导航等等 – 现在它们可以像div一样被devise,和任何块级元素一样。

我已经专门设置了一个文章标签和几个内部部分标签的网站,准备用于语义HTML5标签的确切目的,所以我真的希望Safari 5将使用该阅读器。 没有这样的运气 – 可能应该在这方面提出一个错误,因为这会很有意义。 它实际上完全忽略了页面上的大多数h2级别的小标题,每个都标记为一个小节,只显示符合前述标准的单个div。

具有讽刺意味的是,同一个网站的旧版本,既没有文章,节,也没有分离的div标签,承认整个身体显示在读者。

Firefox和Chrome都有类似的iReader插件。 这是它的源代码项目。

http://code.google.com/p/ireader-extension/

阅读代码获取更多。

请参阅文章发布指南 。

以下是关于如何阅读和分析可读性开发者API的API 。 已经有一个项目可以参考: ruby-readability 。

一个简单的历史:Safari浏览器的function,因为苹果公司的Safari 5浏览器embedded了一个名为可读性的代码库,可读性作为一个简单的,基于Javascript的阅读工具,将任何网页变成一个可定制的阅读视图。 它于2009 年初在纽约市的devise和技术商店Arc90 (作为Arc90 Lab实验)发布。它还embedded在亚马逊Kindle和stream行的iPad应用程序,如Flipboard和Reeder中。

我正在从类似于Safari Readerfunction的信息“垃圾”中清除网站的algorithm。 这不是可读性好,但有一些很酷的东西。

您可以在smartbrowser.codeplex.com项目页面了解更多信息。