优化网站以在 Firefox 中显示 reader 视图

Question

Firefox 38.0.5 在地址栏中添加了一个"Reader View"：

但并非所有网站都有此图标，它仅在检测到可读内容页面时出现。那么如何为我的网站启用这个功能呢？

我尝试了媒体打印和打印视图的额外样式表，但这没有效果：

<html>
<head>
<style>
  @media print { /* no effect: */
    .no-print { display:none; }
  }
</style>
<!-- no effect either:
<link rel="stylesheet" href="print.css" media="print"><!--  -->
</head><body>
<h1>Some Title</h1>
<img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+should+vanish+in+print+view">
<br><br><br>This is the only text
</body></html>

我必须将哪些代码片段添加到我的网站源代码中才能让这个书籍图标对我网站的访问者可见？

Answer 1

您必须添加 <div> 或 <p> 标签才能实现启动 ReaderView 的页面。

我创建了一个简单的 html 有效：

<html>
<head>
  <title>Reader View shows only the browser in reader view</title>
</head>

<body>
  Everything outside the main div tag vanishes in Reader View<br>
  <img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+should+vanish+in+print+view">
  <div>
    <h1>H1 tags outside ot a p tag are hidden in reader view</h1>
      <img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+is resized+in+print+view">
  <p>
     123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
     123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
     123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
     123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
     123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
     123456789 123456
    </p>
  </div>
</body>

</html>

这是激活它所需的最低要求。这是一个多方面的过程，其中为文本块添加分数。

例如，如果您在查看帖子模板中的每个消息块周围添加一个 <p> 标签，就可以激活论坛软件中的 reader 视图。

Answer 2

由于代码位于 May '20 中，触发函数 (isProbablyReaderable) 仅对 p 或 pre 元素和至少包含 div 元素进行评分一名死者 br.

对启发式评分的稍微过度简化是：

对于 ['p'、'pre'、'div > br'] 中的每个元素：
- 如果 textContent 长度 > 140 个字符，将 score 增加 sqrt(length - 140)
如果累积 score > 20，return true

优化网站以在 Firefox 中显示 reader 视图

Optimize website to show reader view in Firefox

firefox

firefox-reader-view