web-dev-qa-db-ja.com

Firefoxでリーダービューを表示するようにWebサイトを最適化する

Firefox 38.0.5は、アドレスバーに「リーダービュー」を追加しました。

enter image description here

ただし、すべてのサイトにこのアイコンが表示されるわけではありません。読み取り可能なコンテンツページが検出された場合にのみ表示されます。それでは、どうすればenable自分のサイトでこれを実現できますか？

メディア印刷と印刷ビュー用の追加のスタイルシートを試しましたが、効果はありません。

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

このbook iconがサイトの訪問者に表示されるようにするには、どのコードスニペットをウェブサイトのソースコードに追加する必要がありますか？

firefoxfirefox-reader-view
25
rubo77

ReaderViewを開始するページを実現するには、<div>または<p>タグを追加する必要があります。

動作するシンプルな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>

これは、アクティブ化するために最低限必要なものです。これは、テキストチャンクにスコアが追加される、多面的なプロセスです。

たとえば、view-postsテンプレートの各メッセージブロックの周りに<p>-タグを追加すると、フォーラムのソフトウェアでリーダービューをアクティブにできます。

メカニズムの詳細を次に示します

12
rubo77

コードは Nov '17 にあるため、トリガー関数（isProbablyReaderable）はpまたはpre要素とdiv要素のみをスコアリングします少なくとも1つの子孫brを含む。

スコアリングヒューリスティックのわずかな単純化は次のとおりです。

  • ['p'、 'pre'、 'div> br']：の各要素に対して
    • textContentの長さが> 140文字の場合、sqrt(length - 140)だけscoreを増やします
  • 累積score> 20の場合、trueを返します
13
ahochhaus