Comment est-ce que Firefox lecteur vue d'exploiter

Résumé

Je suis à la recherche pour les critères par lesquels je peux créer une page web et être [assez] assurez-vous qu'il apparaîtra dans le Firefox Lecteur
Vue, si l'utilisateur le souhaite.

Certains sites ont cette option, certains ne le font pas. Certains avec plus de texte n'ont pas cette option que les autres avec beaucoup moins de texte. Un Débordement de pile pour
exemple affiche uniquement les questions plutôt que des réponses dans le Lecteur
Vue.

Question

J'ai eu mon Firefox mis à niveau à partir 38.0.1 à 38.0.5 et ont trouvé une nouvelle fonctionnalité appelée ReaderView - qui est une sorte de revêtement, ce qui supprime la page "fouillis" et rend le texte plus facile à lire.
Readerview est trouvé sur le côté droit de la barre d'adresse comme une icône cliquable sur certaines pages.

C'est très bien, mais du point de vue programmation, je voudrais savoir comment "lecteur de vue" œuvres", dont les critères de pages auxquelles il s'applique. J'ai fait un peu d'exploration de l'Mozilla Firefox site avec pas de réponses claires (sod l'ensemble de la programmation des réponses de quelque sorte que j'ai trouvé), j'ai bien sûr Cherché sur google /Boulimiques et cela ne revint avec des références à des addons Firefox - ce n'est pas un addon, mais un aliment de base de la partie de la nouvelle version de Firefox.

J'ai fait l'hypothèse que readerview utilisé HTML5 et extrait <article> contenu, mais ce n'est pas le cas, car il fonctionne sur Wikipédia qui ne semble pas utiliser <article> ou similaire balises HTML5, au lieu de la readview extraits de certaines <div>s et les affiche à lui seul. Cette fonctionnalité fonctionne sur certaines pages HTML5 - wikipédia - mais pas les autres.

Si quelqu'un a des idées, la façon dont Firefox ReaderView opère 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 l'endroit où cette information peut être trouvée, pouvez-vous me diriger dans la bonne direction - que je n'ai pas été en mesure de trouver cela.

  • La source de la bibliothèque utilisée par Firefox Lecteur de point de Vue est sur GitHub à l'adresse github.com/mozilla/readability si ça peut aider...
  • merci @RichardNeish - de prendre un coup d'oeil, il n'est pas clair, c'est une dépouillé <div> et/ou <article> et/ou <p> et quelques autres balises. Je vais avoir besoin de lire sur elle quand je suis frais de demain.. . .
  • Pourriez-vous écrire vos résultats comme une réponse? Je serais intéressé de savoir comment il fonctionne.
  • Pour info @RichardNeish , la Lecture à travers le gitHub de code, ce matin, le processus est que les éléments de la page sont listés dans une probabilité de l'ordre - avec <section>,<p>,<div>,<article> en haut de la liste (c'est à dire le plus probable) et ensuite chacun de ces "nœuds" est un score basé sur des choses comme la virgule compte et les noms de classe qui s'appliquent pour le nœud. La valeur du score décide si la page HTML peut être "page vue" dans Firefox. Je ne suis pas absolument clair, si la valeur du score est défini par Firefox ou par la lisibilité de la fonction. Javascript n'est vraiment pas mon point fort, donc quelqu'un d'autre doit vérifier au cours de cette.
  • Je pense que vous devriez envisager d'afficher que comme une réponse (et ensuite de ne pas l'accepter, si vous pensez que quelqu'un d'autre ne peut faire mieux que vous).
  • cheers @svick j'ai fait. Aussi bravo pour ajouter le lecteur-vue drapeau, je n'étais pas au courant du drapeau existait déjà!
  • Il n'a pas, je viens de créé il. (Même si je ne suis pas complètement sûr que c'était un bon appel, il est peut-être trop peu d'importance à sa propre étiquette.)
  • ah, eh bien, c'est déjà en ai deux questions sur SOI - et quelque peu d'un manque de documentation pour les développeurs Mozilla (j'ai regardé hier) .
  • Sur les Webmasters: Comment puis-je rendre mon site compatible avec Firefox Lecteur de Vue de la fonction
  • hahaha @unor, comme le lien de permutation là 😀

InformationsquelleAutor Martin | 2015-06-05
  1. 52

    Vous avez besoin d'au moins un <p> balise autour du texte que vous voulez voir dans le Lecteur et qu'au moins 516 caractères en 7 mots à l'intérieur du texte.

    l'exemple de ce qui va déclencher l'ReaderView:

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

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

    • Merci pour l'info, j'ai un problème de pages qui ont de multiples <p> de balises, mais chaque balise est sous la min nombre de caractères, bien que les 3 balises à 1455 caractères. Mais bien de savoir la spécification chiffres que j'ai besoin de travailler afin de rendre le Lecteur Vue possible sur une page. Je note aussi que les images <figure> balises à l'intérieur de l'extérieur <p> balises sont conservés dans le Lecteur de point de Vue . Bravo pour votre aide
    • Il serait également intéressant de voir comment le chrome reader vue sur android est déclenchée?
    InformationsquelleAutor rubo77
  2. 29

    De la lecture à travers le gitHub de code, ce matin, le processus est que les éléments de la page sont listés dans une probabilité de l'ordre - avec <section>,<p>,<div>,<article> en haut de la liste (c'est à dire le plus probable).

    Ensuite, chacun de ces "nœuds" est un score basé sur des choses comme la virgule compte et les noms de classe qui s'appliquent pour le nœud. C'est un peu multi-facettes processus où les scores sont additionnés pour le texte des morceaux, mais aussi les scores sont apparemment réduit pour les parties invalides ou de la syntaxe. Les Scores dans les sous-parties de "nœud" sont reflétées dans le score du nœud dans son ensemble. c'est à dire l'élément parent renferme les scores de tous les éléments inférieurs, je pense.

    Ce score valeur détermine si la page HTML peut être "page vue" dans Firefox.

    Je ne suis pas absolument clair, si la valeur du score est défini par Firefox ou par la lisibilité de la fonction.

    Javascript n'est vraiment pas mon point fort,et je pense que quelqu'un d'autre doit vérifier sur le lien fourni par Richard ( https://github.com/mozilla/readability ) et de voir si elles peuvent fournir une plus approfondie de la réponse.

    Ce que je n'ai pas vu mais on s'attend à voir était de score basé sur la quantité de texte contenu dans un <p> ou un <div> (ou d'autres) les balises pertinentes.

    Des améliorations sur cette question ou d'une réponse, merci de partager!!

    EDIT:
    Les Images en <div> ou <figure> balises (HTML5) au sein de la <p> élément semble être conservés dans le Lecteur de point de Vue lorsque le texte de la page de contenu est valide.

    • Je me demande, si Apple Safari est en utilisant les mêmes critères, ou d'une autre.
    InformationsquelleAutor Martin
  3. 19

    J'ai suivi Martin du lien à l'Readability.js GitHub, et a eu un coup d'oeil au code source. Voici ce que j'ai faire.

    L'algorithme fonctionne avec des étiquettes de paragraphe. Tout d'abord, il tente d'identifier les parties de la page qui ne sont certainement pas de contenu comme des formes et ainsi de suite - et les supprime. Puis il va à travers les nœuds de paragraphe sur la page et attribue un score basé sur le contenu-la richesse: il leur donne des points pour des choses comme le nombre de virgules, de la longueur du contenu, etc. Notez qu'un paragraphe de moins de 25 caractères est immédiatement supprimé.

    Scores ensuite "remonter" l'arbre du DOM: chaque paragraphe s'ajoute une partie du score à l'ensemble de nœuds parents - un parent direct obtient le score maximal ajouté à son total, un grand-parent, la moitié seulement, un grand-parent d'un troisième et ainsi de suite. Cela permet à l'algorithme d'identifier des éléments qui sont susceptibles d'être le principal contenu de la section.

    Si c'est juste de Firefox algorithme, ma conjecture est que si il fonctionne bien pour Firefox, il va bien travailler pour les autres navigateurs aussi.

    Pour ces Lecteur de Vue des algorithmes de travail pour votre site web, vous voulez afin d'identifier correctement le contenu lourd sections de votre page. Cela signifie que vous voulez le plus de contenu lourd nœuds sur votre page pour obtenir des scores élevés dans l'algorithme.

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

    1. Utiliser des étiquettes de paragraphe dans votre contenu! Beaucoup de gens ont tendance à négliger
      en faveur de <br /> balises. S'il peut sembler similaires, de nombreux
      concernant les contenus, les algorithmes (pas seulement le Lecteur de Vue) de s'appuyer fortement
      sur eux.
    2. Utilisation 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 noté dans la question), elles sont très utiles pour la lecture de vos ordinateurs
      page (et pas seulement de mode Reader) pour distinguer les différentes sections de
      votre contenu. Readability.js utilise pour deviner lequel les nœuds sont susceptibles ou peu susceptibles de contenir du contenu important.
    3. Envelopper votre principal contenu dans un conteneur, comme une <article> ou <div>
      de l'élément. Cela permettra de recevoir des points de toutes les étiquettes de paragraphe
      à l'intérieur, et à être identifié comme le principal contenu de la section.
    4. Garder votre arborescence DOM peu de contenu-des zones denses. Si vous avez beaucoup
      des éléments de rupture de vos contenus, vous êtes seulement à rendre la vie plus difficile
      pour l'algorithme: il n'y aura pas un seul élément qui se démarque
      comme parent de beaucoup de contenu lourd paragraphes, mais de nombreux
      distinctes avec de faibles scores.
    • J'ai d'abord écrit un article sur mon propre site sur cette, pensé que je voudrais contribuer ici, au lieu de simplement de le brancher.
    • Merci pour votre réponse. Pourriez-vous ajouter une date (et un lien?) lorsque vous avez écrit ceci sur votre site, comme les détails que vous avez posté ici sont beaucoup plus complexes que rubo77 ou de mes réponses, donc je m'attends à ce que l'algorithme a été rendue plus complexe avec chaque version de Firefox.
    • Il a été écrit en novembre 2016 - voici le lien: weblog.zumguy.com/read.php?tid=56
    • Fait intéressant à noter, c'est la réponse qui s'affiche quand j'ai activer le mode Reader sur mon firefox.
    InformationsquelleAutor Sean Bone