火狐阅读器视图如何操作答案

【问题标题】：How does Firefox reader view operate火狐阅读器视图如何操作
【发布时间】：2015-08-20 02:47:03
【问题描述】：

总结

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

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

问题

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

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

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

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

【问题讨论】：

Firefox Reader View 使用的库的来源在 GitHub 上的 github.com/mozilla/readability，如果有帮助的话...
感谢@RichardNeish - 看看它，不清楚，它是一个精简的<div> 和/或<article> 和/或<p> 和其他一些标签。我明天有空的时候需要读一遍…… .
你能写下你的发现作为答案吗？我很想知道它是如何工作的。
仅供参考 @RichardNeish ，今天早上阅读 gitHub 代码，该过程是页面元素以可能的顺序列出 - <section>,<p>,<div>,<article>在列表的顶部（即最有可能），然后根据适用于该节点的逗号计数和类名等内容为这些“节点”中的每一个赋予一个分数。分数值决定 HTML 页面是否可以在 Firefox 中“查看页面”。我不是很清楚分数值是由 Firefox 还是由可读性功能设置的。 Javascript 真的不是我的强项，所以其他人应该检查一下。
开启Webmasters: How do I make my site compatible with Firefox's Reader View feature

标签： javascript firefox firefox-reader-view

【解决方案1】：

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

例如这将触发 ReaderView：

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

在https://stackoverflow.com/a/30750212/1069083查看我的示例

【讨论】：

感谢您的信息，我有一个页面有多个 <p> 标签，但每个标签都在最小字符数之下，虽然 3 个标签最多 1455 个字符。但很高兴知道我需要努力使阅读器视图在页面上成为可能的规范编号。我还注意到外部 <p> 标记内的 <figure> 标记中的图像保留在 Reader View 中。为您的帮助干杯
android上的chrome阅读器视图是如何触发的也会很有趣？

【解决方案2】：

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

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

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

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

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

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

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

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

【讨论】：

我想知道，Apple 的 Safari 是使用相同的标准还是不同的标准。

【解决方案3】：

我关注了 Martin 指向 Readability.js GitHub repository 的链接，并查看了源代码。这就是我的想法。

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

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

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

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

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

在您的内容中使用段落标签！很多人容易忽视他们支持<br /> 标签。虽然看起来很相似，但很多与内容相关的算法（不仅是 Reader View 算法）严重依赖在他们身上。
在标记中使用 HTML5 语义元素，例如 <article>、<nav>、 <section>，<aside>。即使它们不是唯一的标准（正如您在问题中指出的那样），这些对于阅读您的计算机非常有用页面（不仅仅是阅读器视图）来区分不同的部分你的内容。 Readability.js 使用它们来猜测哪些节点可能或不可能包含重要内容。
将主要内容封装在一个容器中，例如 <article> 或 <div> 元素。这将从所有段落标签中获得分数在里面，并被标识为主要内容部分。
在内容密集的区域保持 DOM 树的浅层。如果你有很多打破你的内容的元素，你只会让生活变得更艰难对于算法：不会有一个单一的元素脱颖而出作为许多内容繁重的段落的父级，但很多将低分的分开。

【讨论】：

我最初在自己的网站上写了一篇关于这个的文章，我想我会在这里贡献而不是仅仅插入它。
感谢您的回答。你能在你的网站上写这个时添加一个日期（和一个链接吗？），因为你在这里发布的细节比 rubo77 或我的答案复杂得多，所以我希望每个算法都变得更复杂发布 Firefox。
@Martin 写于 2016 年 11 月 - 这是链接：weblog.zumguy.com/read.php?tid=56
有趣的是，这是我在 Firefox 上启用阅读器视图时出现的答案。
注意——文章现在在http://zumguy.com/enabling-reading-mode-on-your-website/下