Optimize website to show reader view in Firefox

前端未结

关注

 2  2045

死守一世寂寞

Firefox 38.0.5 added a \"Reader View\" to the address bar:

$\"enter$

But not all

相关标签:

2条回答

广开言路

2020-12-04 18:44
As the code stands in May '20 the trigger function (isProbablyReaderable) scores only p or pre elements and div elements that contain at least one decedent br.

A slight oversimplification of the scoring heuristic is:
- For each element in ['p', 'pre', 'div > br']:
  - If textContent length is > 140 chars, increase score by sqrt(length - 140)
- if cumulative score > 20, return true
0 讨论(0)
发布评论:

提交评论
- 加载中...

时光取名叫无心

2020-12-04 19:01

You have to add <div> or <p> tags to achieve a page to iniciate the ReaderView.

I created a simple html that works:

<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>

This is the minimum needed to activate it. This is a somewhat multi-faceted process where scores are added for text chunks.

You can for example activate the reader view in forum's software if you add a <p>-tag around each message block in the view-posts template.

Here are some more details about the mechanism

0 讨论(0)