88

概括

如果用户需要，我正在寻找可以创建网页并[相当]确定它会出现在Firefox Reader View中的标准。

有些网站有这个选项，有些没有。与文本少得多的其他人相比，一些文本较多的人没有此选项。例如，堆栈溢出仅在阅读器视图中显示问题而不是任何答案。

问题

我已经将我的 Firefox 从 38.0.1 升级到 38.0.5，并且发现了一个名为 ReaderView 的新功能 - 这是一种消除“页面混乱”并使文本更易于阅读的覆盖。Readerview 位于地址栏的右侧，作为某些页面上的可点击图标。

这很好，但是从编程的角度来看，我想知道“阅读器视图”是如何工作的，它适用于哪些页面的标准。我已经对 Mozilla Firefox 网站进行了一些探索，但没有明确的答案（我发现的所有编程答案都是我发现的），我当然已经用 Google 搜索过/Binged 这个，这只是引用了 Firefox 插件 - 这不是插件而是新 Firefox 版本的主要部分。

我假设 readerview 使用 HTML5 并会提取<article>内容，但事实并非如此，因为它适用于似乎没有使用<article>或类似 HTML5 标签的 Wikipedia，而是 readview 提取某些<div>s 并单独显示它们。此功能适用于某些 HTML5 页面 - 例如维基百科 - 但不适用于其他页面。

如果有人对 Firefox ReaderView 的实际操作以及网站开发人员如何使用此操作有任何想法，您能分享一下吗？或者，如果您可以找到此信息的位置，您能否指出正确的方向 - 因为我无法找到此信息。

4

3 回答 3

70

您需要在文本周围至少有一个<p>标签，您希望在阅读器视图中看到该标签，并且在文本内的 7 个单词中至少需要 516 个字符。

例如，这将触发 ReaderView：

<body>
<p>
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789 123456
</p>
</body>

请参阅我在https://stackoverflow.com/a/30750212/1069083上的示例

于 2015-06-10T07:51:08.847 回答
41

通读 gitHub 代码，今天早上，流程是页面元素按可能的顺序列出——列表顶部有<section>, <p>, <div>, （即最有可能）。<article>

然后，这些“节点”中的每一个都会根据适用于该节点的逗号计数和类名等内容进行评分。这是一个有点多方面的过程，其中为文本块添加分数，但对于无效部分或语法似乎也会降低分数。“节点”子部分的分数反映在节点整体的分数上。即父元素包含所有较低元素的分数，我认为。

此分值决定 HTML 页面是否可以在 Firefox 中“查看页面”。

我不是很清楚分数值是由 Firefox 还是由可读性功能设置的。

Javascript 真的不是我的强项，我认为其他人应该检查 Richard 提供的链接（https://github.com/mozilla/readability），看看他们是否可以提供更全面的答案。

我没有看到但期望看到的是基于一个<p>或一个<div>（或其他）相关标签中的文本内容量的分数。

此问题或答案的任何改进，请分享！

编辑：当页面文本内容有效时，元素中的图像<div>或<figure>标签（HTML5）<p>似乎保留在阅读器视图中。

于 2015-06-06T22:43:49.543 回答
33

我按照 Martin 的指向 Readability.js GitHub 存储库的链接，查看了源代码。这就是我的看法。

该算法适用于段落标签。首先，它会尝试识别页面中绝对不是内容的部分——比如表单等——并删除它们。然后它遍历页面上的段落节点并根据内容丰富度分配分数：它为逗号数量、内容长度等内容打分。请注意，少于 25 个字符的段落会立即被丢弃。

分数然后“冒泡”DOM树：每个段落都会将它的部分分数添加到它的所有父节点 - 直接父节点将全部分数添加到其总分中，祖父母只有一半，曾祖父母三分之一等等上。这允许算法识别可能是主要内容部分的更高级别的元素。

虽然这只是 Firefox 的算法，但我猜如果它适用于 Firefox，它也适用于其他浏览器。

为了让这些阅读器视图算法适用于您的网站，您希望它们能够正确识别页面中内容较多的部分。这意味着您希望页面上更多内容重的节点在算法中获得高分。

所以这里有一些经验法则可以提高这些算法眼中的页面质量：

  1. 在您的内容中使用段落标签！许多人倾向于忽略它们而偏爱<br />标签。虽然看起来很相似，但许多与内容相关的算法（不仅是阅读器视图算法）严重依赖它们。
  2. 在您的标记中使用 HTML5 语义元素，例如<article>, <nav>, <section>, <aside>. 即使它们不是唯一的标准（正如您在问题中指出的那样），这些对于阅读您的页面（不仅仅是阅读器视图）的计算机非常有用，以区分您内容的不同部分。Readability.js 使用它们来猜测哪些节点可能或不可能包含重要内容。
  3. 将主要内容包装在一个容器中，例如<article>or<div> 元素。这将从其中的所有段落标签中获得分数，并被识别为主要内容部分。
  4. 在内容密集的区域保持 DOM 树的浅层。如果你有很多元素破坏了你的内容，你只会让算法变得更难：不会有一个元素可以作为很多内容繁重段落的父元素，而是许多单独的元素分数低。
于 2016-11-22T16:58:20.860 回答