Comment activer iOS 5 Safari Reader sur mon site Web?
Comment fonctionne la fonction Reader de Mobile Safari dans iOS 5? Comment l'activer sur mon site. Comment savoir quel contenu de ma page est un article pour déclencher cette fonction?
De nombreuses réponses publiées ici contiennent de fausses informations. Voici quelques corrections/clarifications:
L'élément
<article>Fonctionne très bien comme un wrapper; Safari Reader le reconnaît. Mon site est un exemple . Peu importe l'élément de wrapper que vous choisissez, tant qu'il y en a un, autre que<body>Ou<p>. Vous pouvez utiliser<article>,<div>,<section>; ou des éléments sémantiquement incorrects à cet effet, comme<nav>,<aside>,<footer>,<header>; ou même des éléments en ligne comme<span>(!).Aucun titre n'est requis pour que Reader fonctionne. Voici un exemple de document sans aucun élément
<h*>Sur lequel Reader fonctionne correctement: http://mathiasbynens.be/demo/safari-reader-test-
J'ai posté plus de détails concernant mes découvertes ici: http://mathiasbynens.be/notes/safari-reader
Il semble que l'algorithme sur lequel il se base recherche des p-Tags et il compte des 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'attribue dans les remerciements, voir:
fichier: /// C: /Program%20Files/Safari/Safari.resources/Help/Acknowledgments.html
Arc90 (lisibilité) Copyright © Arc90 Inc.
La lisibilité est concédée sous la licence Apache, version 2.0.
J'ai testé environ 100 variantes de cela sur mon iPhone afin de comprendre ce qui déclenche cet état de lecteur insaisissable. Mes conclusions sont les suivantes:
Voici ce que j'ai trouvé a eu un impact:
- Avoir environ 200 mots ou plus (ou 1000 caractères, y compris les espaces) dans l'article que vous souhaitez déclencher le "Reader" semble nécessaire
- Le lecteur n'a JAMAIS été déclenché lorsque j'avais moins de 170 mots; bien qu'il se soit parfois déclenché lorsque j'avais 180 ou 190 mots.
- Texte à l'intérieur de certains éléments tels que
<ol>ou<ul>(qui ne sont généralement pas utilisés pour contenir une histoire) ne compteront pas pour les 200 mots (ils seront cependant affichés dans le lecteur si le lecteur est déclenché pour d'autres raisons) - Envelopper les 200 mots dans un élément de bloc tel qu'un
<div>ou<article>semble nécessaire (cela dit, je serais surpris 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é n'a PAS eu d'impact:
- Que vous utilisiez un en-tête ou non
- Que ce soit en enveloppant le texte dans un
<p>ou le laisser couler librement - Les ponctuations (c'est-à-dire la suppression de toutes les périodes, virgules, etc., n'ont pas eu d'impact)
Cette question ( Comment désactiver Safari Reader dans une page Web ) a 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 le fait pas. Je ne prévois pas d'implémenter quoi que ce soit qui le désactiverait, mais curieux comme exercice technique.
Voici ce que j'ai appris jusqu'à présent avec quelques notions de base:
Vous avez besoin d'au moins une balise H. Cela ne dépend pas uniquement du nombre de caractères, mais du nombre de balises P et de la longueur. et d'autres critères, Safari fournira le "lecteur" si, avec une balise H, et les éléments suivants:
1 balise P, 2417 caractères 4 balises P, 1527 caractères 5 balises P, 1150 caractères 6 balises P, 862 caractères Si vous soustrayez 1 caractère de l'un des éléments ci-dessus, l'option "Lecteur" n'est pas disponible.
Je dois noter que le nombre de caractères de la balise H joue un rôle, mais malheureusement je ne m'en suis pas rendu compte 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 réglage des balises P les supprime du compte Réglage de l'affichage à aucun, puis les afficher 230 ms plus tard avec Javascript a également évité l'option Reader
Je serais intéressé si quelqu'un pouvait déterminer cela en entier.
Je me débattais avec ça. J'ai finalement sorti le <ul> marques dans mon histoire, et alto! il a commencé à fonctionner.
Je n'ai pas mis d'enveloppe autour du corps, mais je l'ai peut-être fait par accident.
Voir Directives de publication d'articles .
Voici les API sur la façon de lire et d'analyser: API de développeur de lisibilité . Il y a déjà un projet que vous pouvez référencer: lisibilité Ruby .
Un bref historique: la fonctionnalité Safari Reader depuis le navigateur Safari 5 d'Apple a incorporé une base de code nommée Lisibilité , et la lisibilité a commencé comme un simple outil de lecture basé sur Javascript qui transformait n'importe quelle page Web en une vue de lecture personnalisable. Il a été publié par Arc9 (en tant qu'expérience Arc90 Lab), une boutique de conception et de technologie basée à New York, au début de 2009. Il est également intégré à Amazon Kindle et à des applications iPad populaires comme Flipboard et Reeder. .
Aussi surprenant que cela puisse être, il ne fait en effet aucune attention à la balise d'article HTML5, particulièrement décevant étant donné que Safari 5 prend entièrement en charge les articles, sections, nav, etc. en CSS - ils peuvent être stylés comme un div maintenant, et se comportent 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 intérieure, en préparation d'un étiquetage sémantique HTML5 à cette fin, j'espérais vraiment que Safari 5 l'utiliserait pour Reader. Pas de chance - devrait probablement déposer un bug à ce sujet, car cela aurait beaucoup de sens. En fait, il ignore complètement la plupart des sous-titres de niveau h2 de la page, chacun marqué comme une section, affichant uniquement la div unique qui respecte les critères mentionnés précédemment.
Ironiquement, l'ancienne version du même site, qui n'a ni article, ni section, ni séparation des balises div, reconnaît le corps entier pour l'affichage dans Reader.
La balise d'article HTML5 ne la déclenche pas lors de mes tests. Il ne semble pas non plus fonctionner sur le contenu hors ligne (c'est-à-dire les pages enregistrées sur votre ordinateur local).
Ce qui semble le déclencher, c'est un bloc div avec beaucoup de p avec beaucoup de texte.
Firefox et Chrome ont le plugin similaire nommé iReader. Voici son projet avec le code source.
http://code.google.com/p/ireader-extension/
Lisez le code pour en savoir plus.
La théorie de la balise p sonne bien. Je pense qu'il 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 l'a fait.
Il est également assez intelligent pour détecter les articles de plusieurs 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 également.
Je travaille sur des algorithmes pour nettoyer les sites Web des "déchets" d'informations similaires à la fonction Safari Reader. Ce n'est pas aussi bon que la lisibilité, mais il a des trucs sympas.
Vous pouvez en savoir plus sur smartbrowser.codeplex.com page du projet.