Firefox阅读器视图如何运作

Question

Firefox阅读器视图如何运作

Mar*_*tin 69 javascript firefox firefox-reader-view

摘要

我正在寻找可以创建网页的标准,并且[相当]确定它将出现在Firefox阅读器视图中,如果用户需要的话.

有些网站有此选项,有些则没有.一些文本较多的文本没有此文本的选项.例如,Stack Overflow仅显示问题而不是Reader View中的任何答案.

题

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

这很好,但从编程的角度来看,我想知道"读者观点"是如何工作的,它适用于哪个页面的标准.我已经对Mozilla Firefox网站进行了一些探索,但没有明确的答案(我找到的任何类型的编程答案),我当然用Google搜索/ Binged这个,这只是带有对Firefox插件的引用 - 这不是插件但是新版Firefox的主要部分.

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

如果有人知道Firefox ReaderView实际运行的方式以及网站开发人员如何使用此操作,您能分享吗？或者如果你能找到这些信息的位置,你能否指出我正确的方向 - 因为我无法找到这个.

Answer 1

rub*_*o77 57

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

例如,这将触发ReaderView:

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

Run Code Online (Sandbox Code Playgroud)

请参阅/sf/answers/2152514871/上的示例

Answer 2

Mar*_*tin 29

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

然后,基于诸如逗号计数和适用于节点的类名之类的事物给予这些"节点"中的每一个"得分".这是一个多方面的过程,其中为文本块添加分数,但对于无效部分或语法,分数似乎也减少了."节点"的子部分中的分数反映在整个节点的分数中.也就是说,父元素包含所有较低元素的分数.

此分数值决定HTML页面是否可以在Firefox中"页面查看".

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

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

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

对这个问题或答案的任何改进,请分享!!

编辑:当页面文本内容有效时,元素中的图像<div>或<figure>标签(HTML5)<p>似乎保留在Reader View中.

我想知道 Apple 的 Safari 是使用相同的标准还是不同的标准。 (2认同)

Answer 3

Sea*_*one 22

我按照Martin的Readability.js GitHub存储库链接,查看了源代码.这就是我的成就.

该算法适用于段落标记.首先,它试图识别页面中绝对不是内容的部分 - 比如表单等 - 并删除它们.然后它遍历页面上的段落节点并根据内容丰富度分配一个分数:它为它们提供诸如逗号数量,内容长度等内容的点数.请注意,立即丢弃少于25个字符的段落.

分数然后"冒泡"DOM树:每个段落将其部分分数添加到其所有父节点 - 直接父母将总分增加到其总数,祖父母只有一半,一个曾祖父母三分之一等等上.这允许算法识别可能是主要内容部分的更高级元素.

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

为了使这些Reader View算法适用于您的网站,您希望它们能够正确识别页面内容丰富的部分.这意味着您希望页面上内容较多的节点在算法中获得高分.

因此,在这些算法的眼中,这里有一些改进页面质量的经验法则:

在您的内容中使用段落标记!很多人倾向于忽略它们而不支持<br />标签.虽然它可能看起来很相似,但许多与内容相关的算法(不仅是Reader View算法)在很大程度上依赖于它们.
使用HTML5语义元素在您的标记,如<article>,<nav>, <section>,<aside>.即使它们不是唯一的标准(正如您在问题中所述),但这些对于阅读您的页面的计算机(不仅仅是阅读器视图)非常有用,以区分您内容的不同部分.Readability.js使用它们来猜测哪些节点可能或不太可能包含重要内容.
将主要内容包装在一个容器中,如元素<article>或<div>元素.这将从其中的所有段落标记中获得得分点,并被识别为主要内容部分.
在内容密集区域保持DOM树浅.如果你有很多元素打破了你的内容,你只会让算法变得更加艰难:没有一个元素能够成为很多内容丰富的段落的父级,但很多单独的元素得分低.

有趣的是,这是我在firefox上启用Reader View时出现的答案. (5认同)
我最初在我自己的网站上写了一篇关于这个的文章，我想我会在这里做出贡献而不是仅仅插入它。 (2认同)
@Martin 写于 2016 年 11 月 - 这是链接：http://weblog.zumguy.com/read.php?tid=56 (2认同)
注意——这篇文章现在位于[http://zumguy.com/enabling-reading-mode-on-your-website/](http://zumguy.com/enabling-reading-mode-on-your-website /) (2认同)

归档时间：	10 年，3 月前
查看次数：	21968 次
最近记录：	8 年，7 月前