Firefox reader 视图如何操作
How does Firefox reader view operate
总结
I am looking for the criteria by which I can create a webpage and be [fairly] sure it will appear in the Firefox Reader
View, if user desired.
Some sites have this option, some do not. Some with more text do not have this option than others with much less text. Stack Overflow for
instance displays only the question rather than any answers in Reader
View.
问题
我已将我的 Firefox 从 38.0.1 升级到 38.0.5，并发现了一个名为 ReaderView 的新功能 - 这是一种覆盖层，它删除了 "page clutter" 并使文本更易于阅读。
Readerview 位于地址栏的右侧，在某些页面上是一个可点击的图标。
这很好，但从编程的角度来看，我想知道 "reader view" 是如何工作的，它适用于哪些页面的哪些标准。我已经对 Mozilla Firefox 网站进行了一些探索，但没有明确的答案（我找到了所有类型的编程答案），我当然用谷歌搜索/搜索了这个，这只返回了对 Firefox 插件的引用 - 这不是插件但是新 Firefox 版本的主要部分。
我假设 readerview 使用 HTML5 并会提取 <article> 内容，但事实并非如此，因为它适用于维基百科，它似乎没有使用 <article> 或类似内容HTML5 标签，而不是 readview 提取某些 <div>s 并单独显示它们。此功能适用于某些 HTML5 页面 - 例如维基百科 - 但不适用于其他页面。
如果有人对 Firefox ReaderView 的实际操作方式以及网站开发人员如何使用该操作有任何想法，您能分享一下吗？或者，如果您能找到这些信息的位置，能否为我指出正确的方向 - 因为我找不到它。
阅读 gitHub 代码，今天早上，过程是页面元素按可能顺序列出 - <section>、<p>、<div>， <article> 在列表的顶部（即最有可能）。
然后根据逗号计数和适用于节点的 class 名称等因素为这些 "nodes" 中的每一个打分。这是一个多方面的过程，其中为文本块添加分数，但似乎也为无效部分或语法减少分数。 "node"的子部分得分反映在节点整体得分中。即父元素包含所有较低元素的分数，我认为。
这个分数值决定 HTML 页面在 Firefox 中是否可以 "page viewed"。
分值是Firefox设置的还是可读性功能设置的我不是很清楚。
Javascript 真的不是我的强项，我认为其他人应该检查一下 Richard ( https://github.com/mozilla/readability ) 提供的 link ，看看他们是否可以提供更彻底的回答。
我没有看到但希望看到的是基于 <p> 或 <div>（或其他）相关标签中文本内容量的分数。
关于这个问题或答案的任何改进，请分享！！
编辑：
当页面文本内容有效时，<div> 或 <figure> 标签 (HTML5) 中的图像似乎保留在 Reader 视图中。
您需要在文本周围至少有一个 <p> 标签，您希望在 Reader 视图中看到该标签，并且文本中的 7 个单词至少包含 516 个字符。
例如，这将触发 Reader视图：
<body>
<p>
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789 123456
</p>
</body>
在
查看我的示例
我跟随 Martin 的 link 来到了 Readability.js GitHub repository，并查看了源代码。这是我的看法。
该算法适用于段落标签。首先，它会尝试识别页面中绝对不是内容的部分（如表单等）并删除它们。然后它遍历页面上的段落节点并根据 content-richness 分配一个分数：它为逗号数量、内容长度等内容提供分数。请注意，少于 25 个字符的段落会立即丢弃。
分数然后 "bubble up" DOM 树：每个段落都会将其部分分数添加到所有 parent 节点 - 直接 parent 获得满分加上它的总数，一个 grandparent 只有一半，一个 great-grandparent 三分之一，依此类推。这允许算法识别可能是主要内容部分的 higher-level 个元素。
虽然这只是 Firefox 的算法，但我的猜测是如果它适用于 Firefox，它也适用于其他浏览器。
为了让这些 Reader 查看算法适用于您的网站，您希望它们正确识别您网页的 content-heavy 部分。这意味着您希望页面上的 content-heavy 个节点在算法中获得高分。
所以这里有一些经验法则可以提高这些算法眼中的页面质量：
- 在您的内容中使用段落标签！很多人容易忽视
他们支持
<br /> 标签。虽然看起来很相似，但很多
content-related 算法（不仅是 Reader 查看算法）严重依赖
在他们身上。
- 在标记中使用 HTML5 个语义元素，例如
<article>、<nav>、
<section>、<aside>。尽管它们不是唯一的标准（正如您在问题中指出的那样），但它们对于计算机阅读您的信息非常有用
页面（不仅仅是 Reader 视图）来区分不同的部分
你的内容。 Readability.js 使用它们来猜测哪些节点可能或不可能包含重要内容。
- 将您的主要内容包装在一个容器中，例如
<article> 或 <div>
元素。这将从所有段落标签中获得分数
在其中，并被标识为主要内容部分。
- 让 content-dense 区域的 DOM 树变浅。如果你有很多
元素破坏了你的内容，你只会让生活更艰难
对于算法：不会有一个元素脱颖而出
作为很多 content-heavy 段落中的 parent，但是很多
分开分数低的。
总结
I am looking for the criteria by which I can create a webpage and be [fairly] sure it will appear in the Firefox Reader View, if user desired.
Some sites have this option, some do not. Some with more text do not have this option than others with much less text. Stack Overflow for instance displays only the question rather than any answers in Reader View.
问题
我已将我的 Firefox 从 38.0.1 升级到 38.0.5，并发现了一个名为 ReaderView 的新功能 - 这是一种覆盖层，它删除了 "page clutter" 并使文本更易于阅读。 Readerview 位于地址栏的右侧，在某些页面上是一个可点击的图标。
这很好，但从编程的角度来看，我想知道 "reader view" 是如何工作的，它适用于哪些页面的哪些标准。我已经对 Mozilla Firefox 网站进行了一些探索，但没有明确的答案（我找到了所有类型的编程答案），我当然用谷歌搜索/搜索了这个，这只返回了对 Firefox 插件的引用 - 这不是插件但是新 Firefox 版本的主要部分。
我假设 readerview 使用 HTML5 并会提取 <article> 内容，但事实并非如此，因为它适用于维基百科，它似乎没有使用 <article> 或类似内容HTML5 标签，而不是 readview 提取某些 <div>s 并单独显示它们。此功能适用于某些 HTML5 页面 - 例如维基百科 - 但不适用于其他页面。
如果有人对 Firefox ReaderView 的实际操作方式以及网站开发人员如何使用该操作有任何想法，您能分享一下吗？或者，如果您能找到这些信息的位置，能否为我指出正确的方向 - 因为我找不到它。
阅读 gitHub 代码，今天早上，过程是页面元素按可能顺序列出 - <section>、<p>、<div>， <article> 在列表的顶部（即最有可能）。
然后根据逗号计数和适用于节点的 class 名称等因素为这些 "nodes" 中的每一个打分。这是一个多方面的过程，其中为文本块添加分数，但似乎也为无效部分或语法减少分数。 "node"的子部分得分反映在节点整体得分中。即父元素包含所有较低元素的分数，我认为。
这个分数值决定 HTML 页面在 Firefox 中是否可以 "page viewed"。
分值是Firefox设置的还是可读性功能设置的我不是很清楚。
Javascript 真的不是我的强项，我认为其他人应该检查一下 Richard ( https://github.com/mozilla/readability ) 提供的 link ，看看他们是否可以提供更彻底的回答。
我没有看到但希望看到的是基于 <p> 或 <div>（或其他）相关标签中文本内容量的分数。
关于这个问题或答案的任何改进，请分享！！
编辑：
当页面文本内容有效时，<div> 或 <figure> 标签 (HTML5) 中的图像似乎保留在 Reader 视图中。
您需要在文本周围至少有一个 <p> 标签，您希望在 Reader 视图中看到该标签，并且文本中的 7 个单词至少包含 516 个字符。
例如，这将触发 Reader视图：
<body>
<p>
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789 123456
</p>
</body>
在
我跟随 Martin 的 link 来到了 Readability.js GitHub repository，并查看了源代码。这是我的看法。
该算法适用于段落标签。首先，它会尝试识别页面中绝对不是内容的部分（如表单等）并删除它们。然后它遍历页面上的段落节点并根据 content-richness 分配一个分数：它为逗号数量、内容长度等内容提供分数。请注意，少于 25 个字符的段落会立即丢弃。
分数然后 "bubble up" DOM 树：每个段落都会将其部分分数添加到所有 parent 节点 - 直接 parent 获得满分加上它的总数，一个 grandparent 只有一半，一个 great-grandparent 三分之一，依此类推。这允许算法识别可能是主要内容部分的 higher-level 个元素。
虽然这只是 Firefox 的算法，但我的猜测是如果它适用于 Firefox，它也适用于其他浏览器。
为了让这些 Reader 查看算法适用于您的网站，您希望它们正确识别您网页的 content-heavy 部分。这意味着您希望页面上的 content-heavy 个节点在算法中获得高分。
所以这里有一些经验法则可以提高这些算法眼中的页面质量：
- 在您的内容中使用段落标签！很多人容易忽视
他们支持
<br />标签。虽然看起来很相似，但很多 content-related 算法（不仅是 Reader 查看算法）严重依赖 在他们身上。 - 在标记中使用 HTML5 个语义元素，例如
<article>、<nav>、<section>、<aside>。尽管它们不是唯一的标准（正如您在问题中指出的那样），但它们对于计算机阅读您的信息非常有用 页面（不仅仅是 Reader 视图）来区分不同的部分 你的内容。 Readability.js 使用它们来猜测哪些节点可能或不可能包含重要内容。 - 将您的主要内容包装在一个容器中，例如
<article>或<div>元素。这将从所有段落标签中获得分数 在其中，并被标识为主要内容部分。 - 让 content-dense 区域的 DOM 树变浅。如果你有很多 元素破坏了你的内容，你只会让生活更艰难 对于算法：不会有一个元素脱颖而出 作为很多 content-heavy 段落中的 parent，但是很多 分开分数低的。