76

iOS 5 中 Mobile Safari 的阅读器功能如何工作？如何在我的网站上启用它。如何告诉它我页面上的哪些内容是触发此功能的文章？

4

11 回答 11

69

此处发布的许多答案都包含虚假信息。以下是一些更正/澄清：

  1. 该<article>元素可以很好地用作包装器；Safari 阅读器可以识别它。我的网站就是一个例子。您选择哪个包装器元素并不重要，只要有一个，除了<body>or <p>。您可以使用<article>, <div>, <section>; 或为此目的在语义上不正确的元素，例如<nav>, <aside>, <footer>, <header>; 甚至像<span>(!) 这样的内联元素。

  2. Reader 工作不需要标题。<h*>这是一个没有任何元素的文档示例，Reader 可以正常工作：http: //mathiasbynens.be/demo/safari-reader-test-3

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

于 2010-06-10T12:11:43.810 回答
8

我已经在我的 iPhone 上测试了 100 种左右的变体，以确定是什么触发了这种难以捉摸的阅读器状态。我的结论如下：

以下是我发现的影响：

  • 在您想要触发“阅读器”的文章中包含大约 200 个或更多单词（或 1000 个字符，包括空格）似乎是必要的
  • 当我的字数少于 170 时，阅读器永远不会被触发；虽然它有时会在我有 180 或 190 个单词时触发。
  • 某些元素内的文本，例如<ol>或<ul>（通常不用于包含故事）将不计入 200 个单词（但是，如果由于其他原因触发阅读器，它们将显示在阅读器中）
  • 将 200 个单词包装在一个块元素中，例如 a <div>or<article>似乎有必要（也就是说，如果有任何网站还没有这种情况，我会感到惊讶）

为了全面披露，以下是我发现没有影响的内容：

  • 是否使用标题
  • 将文本包裹在 a 中<p>还是让它自由流动
  • 标点符号（即删除所有句号、逗号等没有影响）
于 2013-01-15T23:21:06.803 回答
7

似乎它所基于的算法正在寻找 p-Tags 并且它计算像“。”这样的分隔符。在内部文本中。点数最多的部分 (div) 获得焦点。

见： http: //lab.arc90.com/experiments/readability/

似乎是 Reader-mode 的基础，至少 Safari 在 Acknowledgements 中将其属性，请参阅：

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

Arc90 ( Readability ) 版权所有 © Arc90 Inc.
Readability 根据 Apache 许可证 2.0 版获得许可。

于 2010-06-08T16:46:05.133 回答
3

这个问题（How to disable Safari Reader in a web page）有更多细节。复制到这里：

我很想知道更多关于什么触发了 Safari 中的 Reader 选项以及什么不触发。我不打算实施任何会禁用它的东西，但作为一项技术练习感到好奇。

到目前为止，这是我通过一些基本的游戏所学到的：

您至少需要一个 H 标签 它不仅仅取决于字符数，而是取决于 P 标签的数量和长度 可能会寻找句子中断'。和其他标准 Safari 将提供“阅读器”，如果，带有 H 标记，以及以下内容：

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

我应该注意到 H 标签的字符数起到了一定的作用，但遗憾的是，当我确定上述结果时并没有意识到这一点。假设 H 标记有 20 多个字符，并且在上面的结果中是固定的。

其他一些有趣的事情：

设置 P 标签会将它们从计数中删除 将显示设置为无，然后在 230 毫秒后使用 Javascript 显示它们也避免了阅读器选项

如果有人可以完全确定这一点，我会很感兴趣。

于 2010-06-09T09:08:10.827 回答
2

我正在为此苦苦挣扎。<ul>我终于把我故事里的标记拿出来了，还有中提琴！它开始工作了。

我没有在身体周围放任何包装纸，但可能是偶然做的。

于 2012-03-22T15:09:33.207 回答
2

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

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

阅读代码以获取更多信息。

于 2011-01-10T07:05:51.397 回答
1

p标签理论听起来不错。我认为它还可以检测其他元素。我们的一个有 6 段的页面没有触发阅读器，但是有 4 段和一个 img 标签的页面触发了阅读器。

它也很聪明，可以检测多页文章。在 nytimes.com 或 nymag.com 上的多页文章中尝试一下。也有兴趣知道它是如何检测到这一点的。

于 2010-06-08T16:46:38.800 回答
1

请参阅文章发布指南。

以下是有关如何读取和解析的 API：可读性开发人员 API。已经有一个项目可以参考：ruby​​-readability。

简史：自 Apple 的 Safari 5 浏览器嵌入名为Readability的代码库以来，Safari 阅读器的功能，而 Readability 最初是一个简单的、基于 Javascript 的阅读工具，可以将任何网页变成可定制的阅读视图。它于 2009 年初由位于纽约市的设计和技术商店Arc90 （作为 Arc90 实验室实验）发布。它还嵌入了亚马逊 Kindle 和流行的 iPad 应用程序，如 Flipboard 和 Reeder。

于 2015-01-18T17:46:08.910 回答
1

尽管可能令人惊讶，但它确实没有关注 HTML5 文章标签，特别令人失望的是 Safari 5 完全支持 CSS 中的文章、部分、导航等——它们现在可以像 div 一样设置样式，并且行为与任何块级元素相同。

我专门设置了一个带有文章标签和几个内部部分标签的站点，为语义 HTML5 标记做准备，正是出于这样的目的，所以我真的希望 Safari 5 将它用于阅读器。没有这样的运气 - 可能应该为此提交一个错误，因为它很有意义。它实际上完全忽略了页面上的大多数 h2 级别子标题，每个都标记为一个部分，只显示符合前面提到的标准的单个 div。

具有讽刺意味的是，同一站点的旧版本既没有文章、部分也没有分隔 div 标签，它可以识别整个正文以在阅读器中显示。

于 2010-06-09T21:31:20.453 回答
1

HTML5 文章标签不会在我的测试中触发它。它似乎也不适用于离线内容（即保存在本地计算机上的页面）。

似乎触发它的是一个 div 块，其中包含很多 p 和很多文本。

于 2010-06-08T16:07:31.570 回答
0

我正在研究用于从类似于 Safari 阅读器功能的信息“垃圾”中清理网站的算法。它不如可读性好，但有一些很酷的东西。

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

于 2010-06-12T14:57:00.693 回答