Firefox阅读器如何查看操作
概要
我正在寻找我可以创build一个网页的标准，并[如果用户需要的话] [相当]确保它会出现在Firefox阅读器视图中 。
有些网站有这个选项，有些则没有。 一些文本更多的文本没有这个选项比其他文本less得多。 例如堆栈溢出只显示问题，而不是阅读器视图中的任何答案。
题
我已经将Firefox从38.0.1升级到38.0.5，并且发现了一个名为ReaderView的新function – 这是一种覆盖，可以消除“页面混乱”，使文本更易于阅读。 Readerview在地址栏的右侧作为某些页面上的可点击图标。
这很好，但是从编程angular度来看，我想知道“阅读器视图”是如何工作的，哪个页面适用哪个标准。 我已经做了一些Mozilla Firefox网站的探索，没有明确的答案（我find了任何types的编程答案），我当然谷歌/ Binged这只有回来引用Firefox插件 – 这不是一个插件而是新版Firefox版本的主要部分。
我假定readerview使用HTML5，并提取<article>内容，但事实并非如此，因为它在维基百科上似乎不使用<article>或类似的HTML5标签，而是readview提取某些<div>和单独显示它们。 此function适用于某些HTML5页面，如维基百科，但不适用于其他页面。
如果任何人有任何想法如何Firefox ReaderView实际运作，以及如何可以由网站开发人员使用此操作，你可以分享？ 或者如果你能find这个信息的位置，你能指出我的方向 – 因为我一直没有find这个。
你至less需要在文本周围有一个<p>标签，你希望在阅读器视图中看到这个标签，并且在文本里面至less有7个字符的516个字符。
例如，这将触发ReaderView：
<body> <p> 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 123456789 123456 </p> </body>
阅读gitHub代码，今天上午，这个过程就是页面元素按照可能的顺序排列 – 列表顶部的<section> ， <p> ， <div> ， <article>也是最有可能的。
然后，每个这些“节点”被赋予基于诸如逗号计数和适用于该节点的类别名称之类的分数。 这是一个有点多方面的过程，其中为文本块添加分数，但是对于无效部分或语法，分数看似减less。 “节点”的子部分的得分反映在整个节点的得分中。 即父元素包含所有较低元素的分数，我想。
这个分数值决定了HTML页面是否可以在Firefox中被“浏览”。
如果分数值是由Firefox或可读性function设置的，我并不十分清楚。
Javascript真的不是我的强项，我认为别人应该检查由理查德（ https://github.com/mozilla/readability ）提供的链接，看看他们是否能提供更全面的答案。
我没有看到但期望看到的是基于<p>或者<div> （或者其他）相关标签中的文本内容量的得分。
这个问题或答案的任何改进，请分享！
编辑：页面文本内容有效时， <p>元素中的<div>或<figure>标记（HTML5）中的图像似乎保留在“阅读器视图”中。
我跟随Martin的链接到Readability.js GitHub仓库 ，并看看源代码。 这是我所做的。
该algorithm适用于段落标签。 首先，它试图识别那些绝对不是内容的页面部分 – 比如表格等等 – 并将其删除。 然后它遍历页面上的段落节点，并根据内容丰富性分配一个分数：它为逗号，内容长度等等提供点数。请注意，less于25个字符的段落会立即被丢弃。
分数然后“鼓起”DOM树：每个段落将其所有的父节点的分数的一部分 – 一个直接的父母得到的总分加分，祖父母只有一半，祖父母三分之一，所以上。 这允许algorithm识别可能是主要内容部分的更高级元素。
虽然这只是Firefox的algorithm，但我的猜测是，如果它适用于Firefox，那么对于其他浏览器来说，它也可以很好地工作。
为了使这些阅读器视图algorithm适用于您的网站，您希望它们能够正确识别页面上的内容繁多的部分。 这意味着您希望页面上的内容更多的节点在algorithm中获得高分。
所以这里有一些经验法则来提高这些algorithm眼中的页面质量：
- 在您的内容中使用段落标签！ 很多人倾向于忽视他们而转向
<br />标签。 虽然看起来很相似，但很多与内容相关的algorithm（不仅仅是阅读器视图）严重依赖于它们。 - 在标记中使用HTML5语义元素，如
<article>，<nav>，<section>，<aside>。 即使它们不是唯一的标准（正如你在问题中提到的那样），这些对于阅读你的页面的计算机非常有用（不仅仅是阅读器视图）来区分你的内容的不同部分。 Readability.js使用它们来猜测哪些节点可能或不可能包含重要的内容。 - 将主要内容包装在一个容器中，如
<article>或<div>元素。 这将从其中的所有段落标签获得分数，并被标识为主要内容部分。 - 保持你的DOM树在内容密集的区域浅。 如果你有很多元素打破你的内容，那么你只会让这个algorithm变得更加困难：不会有一个单独的元素作为许多内容重要的段落的父母，而是许多单独的元素与低分。
