Firefox阅读器视图如何操作

Question 1

概要

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

有些网站具有此选项，有些则没有。一些文本较多的人没有此选项。例如，“堆栈溢出”仅在阅读器视图中显示问题，而不显示任何答案。

题

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

很好，但是从编程的角度来看，我想知道“阅读器视图”是如何工作的，适用于哪些页面的标准。我对Mozilla Firefox网站进行了一些探索，没有明确的答案（解决了我找到的所有编程答案），我当然对此进行了Googled / Binged处理，并且仅返回了有关Firefox插件的引用-这不是插件但是是新Firefox版本的主要组成部分。

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

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

Question 2

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

例如，这将触发ReaderView：

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

请参阅我的示例，网址为https://stackoverflow.com/a/30750212/1069083

Question 3

通过GitHub的代码，这晨读，这个过程是该页面元素的情形产生顺序列出-有<section>，<p>，<div>，<article>在列表的顶部（即最有可能的）。

然后，根据“逗号数”和适用于该节点的类名之类的东西为这些“节点”中的每一个赋予分数。这是一个多方面的过程，其中为文本块添加了分数，但对于无效部分或语法，似乎也降低了分数。“节点”子部分中的分数反映在整个节点的分数中。我认为父元素包含所有较低元素的分数。

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

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

Javascript确实不是我的强项，我想其他人应该检查Richard所提供的链接（https://github.com/mozilla/readability），看看他们是否可以提供更彻底的答案。

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

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

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

Question 4

我遵循了Martin到Readability.js GitHub存储库的链接，并查看了源代码。这就是我所做的。

该算法与段落标签一起使用。首先，它尝试识别页面中绝对不包含内容的部分（例如表单等）并将其删除。然后，它遍历页面上的段落节点，并根据内容的丰富程度为其分配分数：为它们提供诸如逗号数，内容长度等之类的分数。请注意，少于25个字符的段落将被立即丢弃。

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

尽管这只是Firefox的算法，但我猜想它是否可以在Firefox上正常运行，也可以在其他浏览器上正常运行。

为了使这些Reader View算法适用于您的网站，您希望它们正确地识别页面中内容繁重的部分。这意味着您希望页面上更多内容密集的节点在算法中获得较高的分数。

因此，在这些算法的眼中，有一些经验法则可以提高页面质量：

在您的内容中使用段落标签！许多人倾向于忽略<br />标签，而倾向于标签。尽管看起来很相似，但许多与内容相关的算法（不仅是Reader View的算法）都严重依赖它们。
使用HTML5在您的标记语义元素，如<article>，<nav>， <section>，<aside>。即使它们不是唯一的标准（如您在问题中所指出的），它们对于计算机读取页面（不仅仅是Reader View）以区分内容的不同部分也非常有用。Readability.js使用它们来猜测哪些节点可能或不太可能包含重要内容。
将主要内容包装在一个容器中，例如<article>或<div> 元素。这将从其中的所有段落标签接收得分，并将其标识为主要内容部分。
在内容密集区域将DOM树保持浅。如果您有很多元素要分解内容，那么只会使算法的工作变得更加困难：不会有一个元素成为大量内容繁多的段落的父项，但是会有许多不同的段落低分。