Comment fonctionne la vision du lecteur Firefox?

Résumé

Je suis à la recherche des critères par lesquels je peux créer une page Web et être [juste] sûr que cela apparaîtra dans la vue du lecteur Firefox , si l'utilisateur souhaite.

Certains sites ont cette option, certains ne le font pas. Certains avec plus de texte n'ont pas cette option que d'autres avec beaucoup moins de texte. Stack Overflow, par exemple, affiche uniquement la question plutôt que toute réponse dans Reader View.

Question

J'ai eu mon Firefox amélioré 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 le «désordre de page» et rend le texte plus facile à lire. Le lien de lecture se trouve dans le côté droit de la barre d'adresse comme icône cliquable sur certaines pages.

C'est bien, mais du point de vue de la programmation, je veux savoir comment fonctionne la fonction "vision du lecteur", quel critère des pages auxquelles il s'applique. J'ai fait une exploration du site Mozilla Firefox sans réponses claires (toutes les réponses à la programmation de toutes sortes que j'ai trouvées), j'ai évidemment googlé / bingé ceci et cela ne revenait qu'avec des références aux addons de Firefox – ce n'est pas un addon Mais une partie intégrante de la nouvelle version de Firefox.

J'ai supposé que readerview utilisait HTML5 et extrairait les contenus <article> mais ce n'est pas le cas, car il fonctionne sur Wikipédia, ce qui ne semble pas utiliser <article> ou des balises HTML5 similaires, au lieu de cela, la lecture reprend certains <div> s et Les affiche seul. Cette fonction fonctionne sur certaines pages HTML5 – telles que wikipedia – mais pas d'autres.

Si quelqu'un a des idées sur la façon dont Firefox ReaderView fonctionne réellement et comment cette opération peut être utilisée par les développeurs de sites Web, pouvez-vous partager? Ou si vous pouvez trouver où ces informations peuvent être situées, pouvez-vous me pointer dans la bonne direction – car je n'ai pas pu trouver cela.

Vous avez besoin d'au moins une étiquette <p> autour du texte, que vous souhaitez voir dans Reader View et au moins 516 caractères en 7 mots dans le texte.

Par exemple, cela déclenchera le ReaderView:

 <body> <p> 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 123456789 123456 </p> </body>

Voir mon exemple à l' adresse https://stackoverflow.com/a/30750212/1069083

En procédant à la lecture du code gitHub ce matin, le processus est que les éléments de la page sont répertoriés dans un ordre de probabilité – avec <section> , <p> , <div> , <article> en haut de la liste (c'est-à-dire très probablement).

Ensuite, chacun de ces "noeuds" reçoit un score basé sur des éléments tels que les nombres de virgule et les noms de classe qui s'appliquent au noeud. Il s'agit d'un processus un peu polyvalent où des scores sont ajoutés pour les morceaux de texte, mais les scores sont apparemment réduits pour les pièces ou la syntaxe non valides. Les scores en sous-parties du "noeud" se reflètent dans le score du noeud 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 visualisée dans Firefox.

Je ne suis pas absolument clair 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'ils peuvent fournir une réponse plus approfondie.

Ce que je n'ai pas vu, mais je m'attendais à voir, était un score basé sur la quantité de contenu de texte dans un <p> ou un <div> (ou d'autres) tags pertinents.

Toute amélioration sur cette question ou réponse, partagez!

EDIT: les images dans <div> ou <figure> (HTML5) dans l'élément <p> semblent être conservées dans la vue Reader lorsque le contenu du texte de la page est valide.

J'ai suivi le lien de Martin avec le dépôt Readability.js GitHub et j'ai regardé le code source. Voici ce que je fais.

L'algorithme fonctionne avec des balises de paragraphe. Tout d'abord, il essaie d'identifier les parties de la page qui ne sont certainement pas contentes, comme les formes, etc., et les supprime. Ensuite, il passe les noeuds de paragraphe sur la page et attribue un score basé sur la richesse du contenu: il leur donne des points pour des choses comme le nombre de virgules, la longueur du contenu, etc. Notez qu'un paragraphe avec moins de 25 caractères est immédiatement éliminé.

Les scores puis "gonflent" l'arbre DOM: chaque paragraphe ajoutera une partie de son score à tous ses noeuds 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 donc sur. Cela permet à l'algorithme d'identifier des éléments de niveau supérieur susceptibles d'être la section de contenu principal.

Bien que ce ne soit que l'algorithme de Firefox, je pense que si cela fonctionne bien pour Firefox, ça va bien pour d'autres navigateurs.

Pour que ces algorithmes de visionnement de Reader puissent fonctionner pour votre site Web, vous souhaitez qu'ils identifient correctement les sections de contenu de votre page. Cela signifie que vous souhaitez que les nœuds plus lourds sur le contenu de votre page obtiennent des scores élevés dans l'algorithme.

Voici donc quelques règles pour améliorer la qualité de la page aux yeux de ces algorithmes:

Utilisez des tags de paragraphe dans votre contenu! Beaucoup de gens ont tendance à les ignorer en faveur de <br /> tags. Bien que cela puisse paraître similaire, de nombreux algorithmes liés au contenu (non seulement ceux de Reader View) dépendent fortement d'eux.
Utilisez les éléments sémantiques HTML5 dans votre balisage, comme <article> , <nav> , <section> , <aside> . Bien qu'ils ne soient pas le seul critère (comme vous l'avez noté dans la question), cela est très utile pour les ordinateurs qui lisent votre page (pas seulement sur Reader View) pour distinguer différentes sections de votre contenu. Readability.js les utilise pour deviner les nœuds susceptibles ou peu susceptibles de contenir un contenu important.
Enroulez votre contenu principal dans un conteneur, comme un élément <article> ou <div> . Cela recevra des points de toutes les étiquettes de paragraphe à l'intérieur et sera identifié comme la section de contenu principal.
Gardez votre arbre DOM peu profond dans des zones densément riches en contenu. Si vous avez beaucoup d'éléments pour briser votre contenu, vous ne rendez la vie plus difficile pour l'algorithme: il n'y aura pas un seul élément qui se distingue comme parent de beaucoup de paragraphes de contenu, mais de nombreux éléments distincts Avec des scores bas.