Comment activer iOS 5 Safari Reader sur mon site?

Comment fonctionne la fonction Reader de Mobile Safari dans iOS 5? Comment puis-je l’activer sur mon site? Comment puis-je lui dire quel contenu sur ma page est un article pour déclencher cette fonction?

Un grand nombre des réponses affichées ici contiennent de fausses informations. Voici quelques corrections / clarifications:

  1. L’élément

    fonctionne bien comme un wrapper; Safari Reader le reconnaît. Mon site est un exemple . Peu importe l’élément wrapper que vous choisissez, tant qu’il en existe un, autre que ou

    . Vous pouvez utiliser

    ,

    ,

    ; ou des éléments sémantiquement incorrects à cet effet, tels que

    ,

    ,

    ,

    ; ou même des éléments en ligne comme (!).

  2. Aucun titre n’est requirejs pour que Reader fonctionne. Voici un exemple de document sans aucun élément sur lequel Reader fonctionne correctement: http://mathiasbynens.be/demo/safari-reader-test-3

J’ai posté plus de détails concernant mes résultats ici: http://mathiasbynens.be/notes/safari-reader

J’ai testé une centaine de variantes sur mon iPhone afin de déterminer ce qui déclenche cet état insaisissable de Reader. Mes conclusions sont les suivantes:

Voici ce que j’ai trouvé qui a eu un impact:

  • Avoir environ 200 mots ou plus (ou 1000 caractères incluant des espaces) dans l’article que vous souhaitez déclencher le “Lecteur” semble nécessaire
  • Le lecteur n’a JAMAIS été déclenché lorsque j’avais moins de 170 mots; bien que cela ait parfois été déclenché lorsque j’avais 180 ou 190 mots.
  • Le texte à l’intérieur de certains éléments tels que

      ou

        (qui ne sont généralement pas utilisés pour contenir une histoire) ne sera pas pris en compte pour les 200 mots (ils seront cependant affichés dans le lecteur si le lecteur est déclenché pour d’autres raisons)

      • Emballer les 200 mots dans un élément de bloc tel qu’un

        ou un

        semble nécessaire (cela dit, cela m’étonnerait s’il y avait des sites Web où ce n’était pas déjà le cas)

      Pour une divulgation complète, voici ce que j’ai trouvé qui N’a PAS eu d’impact:

      • Que ce soit en utilisant un en-tête ou non
      • Que ce soit en enveloppant le texte dans un

        ou en le laissant circuler librement

      • Les ponctuations (c.-à-d. Supprimer toutes les périodes, les virgules, etc. n’ont pas eu d’impact)

      Il semble que l’algorithme sur lequel il est basé recherche les balises p et il compte les délimiteurs comme “.” dans le innerText. La section (div) avec le plus de points obtient le focus.

      voir: http://lab.arc90.com/experiments/readability/

      Semble être la base du mode lecteur, au moins Safari l’atsortingbue dans les remerciements, voir:

      fichier: /// C: /Program%20Files/Safari/Safari.resources/Help/Acknowledgements.html

      Arc90 (lisibilité) Copyright © Arc90 Inc.
      La lisibilité est concédée sous la licence Apache, version 2.0.

      Cette question ( Comment désactiver Safari Reader dans une page Web ) contient plus de détails. Copié ici:


      Je suis curieux d’en savoir plus sur ce qui déclenche l’option Reader dans Safari et ce qui ne fonctionne pas. Je ne prévois pas de mettre en œuvre quelque chose qui le désactiverait, mais curieux comme exercice technique.

      Voici ce que j’ai appris jusqu’ici avec des jeux de base:

      Vous avez besoin d’au moins une balise H Il ne va pas par nombre de caractères seul, mais par le nombre de balises et de longueur. et d’autres critères Safari fournira le ‘Reader’ si, avec une balise H, et les suivants:

      1 étiquette P, 2417 caractères 4 étiquettes P, 1527 caractères 5 étiquettes P, 1150 caractères 6 étiquettes P, 862 caractères Si vous soustrayez un caractère de l’un des éléments ci-dessus, l’option «Lecteur» n’est pas disponible.

      Je devrais noter que le nombre de caractères de la balise H joue un rôle, mais malheureusement, ne l’a pas réalisé lorsque j’ai déterminé les résultats ci-dessus. Supposons plus de 20 caractères pour la balise H et corrigés dans les résultats ci-dessus.

      Quelques autres choses intéressantes:

      Le paramétrage des balises P les supprime de l’affichage Count Setting à none, puis leur affiche 230ms plus tard avec Javascript évitant également l’option Reader

      Je serais intéressé si quelqu’un peut déterminer cela en entier.

      Je me débattais avec ça. J’ai finalement sorti les marques

        de mon histoire et de l’alto! cela a commencé à fonctionner.

        Je n’ai pas mis de cape autour du corps, mais je l’ai peut-être fait par accident.

        Le tag article HTML5 ne le déclenche pas lors de mes tests. Il ne semble pas non plus fonctionner sur du contenu hors connexion (c.-à-d. Des pages enregistrées sur votre ordinateur local).

        Ce qui semble déclencher, c’est un bloc div avec beaucoup de p avec beaucoup de texte.

        La théorie des balises p semble bonne. Je pense que cela détecte également d’autres éléments. Une de nos pages avec 6 paragraphes n’a pas déclenché le Reader, mais une avec 4 paragraphes et une balise img.

        Il est également assez intelligent pour détecter les articles multi-pages. Essayez-le sur un article de plusieurs pages sur nytimes.com ou nymag.com. Serait intéressé de savoir comment il détecte cela aussi.

        Aussi surprenant que cela puisse paraître, il ne fait en effet aucune attention à la balise d’article HTML5, particulièrement décevante étant donné que Safari 5 prend entièrement en charge les articles, les sections, les navigations, etc. en CSS. et se comporter comme n’importe quel élément de niveau bloc.

        J’avais spécifiquement mis en place un site avec une balise d’article et plusieurs balises de section interne, en préparation pour l’étiquetage sémantique HTML5 pour un tel objective, alors j’espérais vraiment que Safari 5 l’utiliserait pour Reader. Pas de chance – devrait probablement déposer un bug à ce sujet, car cela ferait beaucoup de sens. En fait, elle ignore complètement la plupart des sous-titres de niveau h2 de la page, chacun étant marqué comme une section, affichant uniquement le div unique qui adhère aux critères mentionnés précédemment.

        Ironiquement, l’ancienne version du même site, qui ne contient ni article, ni section, ni balise div séparée, reconnaît le corps entier à afficher dans Reader.

        Firefox et Chrome ont tous deux le même plug-in nommé iReader. Voici son projet avec le code source.

        http://code.google.com/p/ireader-extension/

        Lisez le code pour en savoir plus.

        Voir les directives de publication d’articles .

        Voici des API sur la façon de lire et d’parsingr les API de lisibilité des développeurs . Vous pouvez déjà vous référer à un projet: la lisibilité des rbuy .

        Un bref historique: la fonctionnalité Safari Reader, depuis le navigateur Safari 5 d’Apple, intégrait un code nommé Readability , et Readability était un simple outil de lecture basé sur Javascript qui transformait une page Web en vue de lecture personnalisable. Il a été lancé par Arc90 (comme une expérience de laboratoire Arc90), une boutique de design et de technologie basée à New York début 2009. Il est également intégré à Amazon Kindle et aux applications iPad populaires telles que Flipboard et Reeder.

        Je travaille sur des algorithmes de nettoyage de sites Web à partir d’informations “gaspillées” similaires à la fonctionnalité de Safari Reader. Ce n’est pas si bon que la lisibilité, mais a des trucs sympas.

        Vous pouvez en apprendre plus sur la page du projet smartbrowser.codeplex.com .