web-dev-qa-db-fra.com

Optimiser le site Web pour afficher la vue du lecteur dans Firefox

Firefox 38.0.5 a ajouté une "vue lecteur" à la barre d'adresse:

enter image description here

Mais tous les sites ne reçoivent pas cette icône, elle n'apparaît que lorsqu'une page de contenu lisible est détectée. Alors, comment puis-je activer cela pour mon site?

J'ai essayé l'impression sur support et une feuille de style supplémentaire pour la vue d'impression, mais cela n'a aucun effet:

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

Quels extraits de code dois-je ajouter au code source de mon site Web pour que ce icône représentant un livre devienne visible pour les visiteurs de mon site?

firefoxfirefox-reader-view
25
rubo77

Vous devez ajouter <div> ou <p> balises pour obtenir une page pour lancer le ReaderView.

J'ai créé un simple html qui fonctionne:

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

C'est le minimum nécessaire pour l'activer. Il s'agit d'un processus à plusieurs facettes où des scores sont ajoutés pour les blocs de texte.

Vous pouvez par exemple activer la vue lecteur dans le logiciel du forum si vous ajoutez un <p>- balise autour de chaque bloc de message dans le modèle de messages d'affichage.

Voici quelques détails supplémentaires sur le mécanisme

12
rubo77

Comme le code existe Nov '17 la fonction de déclenchement (isProbablyReaderable) ne marque que les éléments p ou pre et les éléments div qui contiennent au moins un br décédé.

Une légère simplification excessive de l'heuristique de notation est la suivante:

  • Pour chaque élément de ['p', 'pre', 'div> br']:
    • Si textContent la longueur est> 140 caractères, augmentez score par sqrt(length - 140)
  • si cumulatif score> 20, retournez true
13
ahochhaus