Comment fonctionne la vue du lecteur Firefox
Résumé
Je recherche les critères permettant de créer une page Web et d’être [assez] sûr que celle-ci apparaîtra dans = Firefox Reader View, si l’utilisateur le souhaite.
Certains sites ont cette option, d'autres non. Certains avec plus de texte n'ont pas cette option que d'autres avec beaucoup moins de texte. Le débordement de pile, par exemple, affiche uniquement la question plutôt que les réponses dans Reader View.
Question
J'ai mis à jour Firefox de 38.0.1 à 38.0.5 et j'ai trouvé une nouvelle fonctionnalité appelée ReaderView, qui est une sorte de superposition qui supprime "l'encombrement des pages" et facilite la lecture du texte. L'aperçu en lecture se trouve à droite de la barre d'adresse sous forme d'icône cliquable sur certaines pages.
C'est bien, mais du point de vue de la programmation, je veux savoir comment fonctionne la "vue du lecteur", à quels critères de quelle page elle s'applique. J'ai fait quelques recherches sur le site Web de Mozilla Firefox sans réponses claires (toutes les réponses de programmation que j'ai trouvées), j'ai bien sûr googled/Binged et cela n'est revenu qu'avec des références aux addons de Firefox - ce n'est pas un addon mais une partie essentielle de la nouvelle version de Firefox.
J'ai supposé que readerview utilisait HTML5 et extrairait <article> contenu mais ce n’est pas le cas car cela fonctionne sur Wikipedia qui ne semble pas utiliser <article> ou des balises HTML5 similaires, la readview extrait certains <div>s et les affiche seul. Cette fonctionnalité fonctionne sur certaines pages HTML5 - telles que wikipedia - mais pas sur d’autres.
Si quelqu'un a une idée du fonctionnement réel de Firefox ReaderView et de la façon dont cette opération peut être utilisée par les développeurs de sites Web, pouvez-vous partager? Ou si vous pouvez trouver où cette information peut être localisée, pouvez-vous me diriger dans la bonne direction - car je n'ai pas été capable de le trouver.
Vous avez besoin d'au moins un <p> balise autour du texte, que vous voulez voir en mode Lecteur et au moins 516 caractères de 7 mots à l'intérieur du texte.
par exemple, cela déclenchera le ReaderView:
<body>
<p>
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789 123456
</p>
</body>
Voir mon exemple à https://stackoverflow.com/a/30750212/106908
En lisant le code gitHub, ce matin, le processus est que les éléments de page sont listés dans un ordre de probabilité - avec <section>, <p>, <div>, <article> en haut de la liste (c'est-à-dire le plus probable).
Ensuite, chacun de ces "nœuds" se voit attribuer un score basé sur des éléments tels que le nombre de virgules et les noms de classes qui s'appliquent au nœud. Il s'agit d'un processus à plusieurs facettes dans lequel des partitions sont ajoutées pour des fragments de texte, mais qui semblent également réduites pour des parties ou une syntaxe non valides. Les scores dans les sous-parties du "nœud" sont reflétés dans le score du nœud dans son ensemble. c'est-à-dire que l'élément parent contient les scores de tous les éléments inférieurs, je pense.
Cette valeur de score décide si la page HTML peut être "page consultée" dans Firefox.
Je ne sais pas exactement si la valeur du score est définie par Firefox ou par la fonction de lisibilité.
Javascript n'est vraiment pas mon point fort, et je pense que quelqu'un d'autre devrait vérifier le lien fourni par Richard ( https://github.com/mozilla/readability ) et voir s'il peut fournir une information plus complète répondre.
Ce que je n'ai pas vu mais que j'espérais voir, c'est le score basé sur la quantité de texte contenu dans un <p> Ou un <div> (Ou autre) balises pertinentes.
Toute amélioration sur cette question ou réponse, s'il vous plaît partager !!
ÉDITER: Les images dans les balises <div> Ou <figure> (HTML5) de l'élément <p> Semblent être conservées dans la vue Lecteur lorsque le contenu du texte de la page est valide.
J'ai suivi le lien de Martin vers Readability.js référentiel GitHub , et j’ai jeté un coup d’œil au code source. Voici ce que j'en fais.
L'algorithme fonctionne avec des balises de paragraphe. Tout d'abord, il essaie d'identifier les parties de la page qui ne sont pas du contenu, comme les formulaires, etc., et les supprime. Ensuite, il passe en revue les nœuds de paragraphe de la page et attribue un score basé sur la richesse du contenu: il leur attribue des points comme le nombre de virgules, la longueur du contenu, etc. Notez qu'un paragraphe de moins de 25 caractères est immédiatement supprimé.
Scores puis "bouillonnent" l'arborescence DOM: chaque paragraphe ajoutera une partie de son score à tous ses nœuds parents - un parent direct obtient le score total ajouté à son total, un grand-parent seulement la moitié, un arrière grand-parent un tiers et ainsi de suite. sur. Cela permet à l'algorithme d'identifier des éléments de niveau supérieur susceptibles de constituer la section de contenu principale.
Bien que ce ne soit que l'algorithme de Firefox, je suppose que si cela fonctionne bien pour Firefox, cela fonctionnera également pour les autres navigateurs.
Pour que ces algorithmes Reader View fonctionnent sur votre site Web, vous souhaitez qu'ils identifient correctement les sections de votre page qui contiennent beaucoup de contenu. Cela signifie que vous souhaitez que les nœuds les plus lourds en contenu de votre page obtiennent des scores élevés dans l'algorithme.
Voici donc quelques règles de base pour améliorer la qualité de la page aux yeux de ces algorithmes:
- Utilisez des balises de paragraphe dans votre contenu! Beaucoup de gens ont tendance à les ignorer en faveur de
<br />Mots clés. Bien que cela puisse paraître similaire, de nombreux algorithmes liés au contenu (pas seulement ceux de Reader View) s’appuient beaucoup sur eux. - Utilisez des éléments sémantiques HTML5 dans votre balisage, comme
<article>,<nav>,<section>,<aside>. Même s'ils ne sont pas le seul critère (comme vous l'avez indiqué dans la question), ils sont très utiles pour les ordinateurs lisant votre page (pas uniquement Reader View) pour distinguer différentes sections de votre contenu. Readability.js les utilise pour deviner quels nœuds sont susceptibles de contenir un contenu important. - Enveloppez votre contenu principal dans un conteneur, comme un
<article>ou<div>élément. Cela recevra des points de score de toutes les balises de paragraphe à l'intérieur, et sera identifié comme la section de contenu principale. - Gardez votre arbre DOM peu profond dans les zones à forte densité de contenu. Si vous avez beaucoup d'éléments qui fragmentent votre contenu, vous ne faites que rendre la vie plus difficile pour l'algorithme: il n'y aura pas un seul élément qui se démarque en tant que parent de beaucoup de paragraphes contenant beaucoup de contenu, mais de nombreux paragraphes séparés. avec des scores faibles.