Wie funktioniert die Reader-Funktion von Mobile Safari in iOS 5? Wie aktiviere ich es auf meiner Website? Wie kann ich feststellen, welcher Inhalt meiner Seite ein Artikel ist, um diese Funktion auszulösen?
Wie funktioniert die Reader-Funktion von Mobile Safari in iOS 5? Wie aktiviere ich es auf meiner Website? Wie kann ich feststellen, welcher Inhalt meiner Seite ein Artikel ist, um diese Funktion auszulösen?
Antworten:
Viele der hier veröffentlichten Antworten enthalten falsche Informationen. Hier einige Korrekturen / Klarstellungen:
Das <article>Element funktioniert gut als Wrapper. Safari Reader erkennt es. Meine Seite ist ein Beispiel . Es spielt keine Rolle, welches Wrapper-Element Sie auswählen, solange es ein anderes als <body>oder gibt <p>. Sie können verwendet werden <article>, <div>, <section>; oder Elemente , die semantisch falsch für diesen Zweck sind, wie <nav>, <aside>, <footer>, <header>; oder sogar Inline-Elemente wie <span>(!).
Es sind keine Überschriften erforderlich, damit der Reader funktioniert. Hier ist ein Beispiel für ein Dokument ohne <h*>Elemente, für das Reader einwandfrei funktioniert: http://mathiasbynens.be/demo/safari-reader-test-3
Ich habe hier weitere Details zu meinen Ergebnissen veröffentlicht: http://mathiasbynens.be/notes/safari-reader
Ich habe ungefähr 100 Variationen davon auf meinem iPhone getestet, um herauszufinden, was diesen schwer fassbaren Reader-Status auslöst. Meine Schlussfolgerungen lauten wie folgt:
Folgendes hat sich ausgewirkt:
<ol>oder <ul>(die normalerweise nicht zum Enthalten einer Geschichte verwendet werden) zählt nicht für die 200 Wörter (sie werden jedoch im Leser angezeigt, wenn der Leser aus anderen Gründen ausgelöst wird).<div>oder <article>scheint notwendig (das heißt, ich wäre überrascht, wenn es Websites gäbe, auf denen dies noch nicht der Fall war).Für die vollständige Offenlegung hatte Folgendes Folgendes: KEINE Auswirkungen:
<p>oder ihn frei fließen lassenEs scheint, dass der Algorithmus, auf dem es basiert, nach p-Tags sucht und Trennzeichen wie "." Zählt. im innerText. Der Abschnitt (div) mit den meisten Punkten erhält den Fokus.
siehe: http://lab.arc90.com/experiments/readability/
Scheint die Basis für den Reader-Modus zu sein, zumindest Safari schreibt es in den Danksagungen zu, siehe:
Datei: /// C: /Program%20Files/Safari/Safari.resources/Help/Acknowledgements.html
Arc90 (Lesbarkeit) Copyright © Arc90 Inc. Die
Lesbarkeit wird unter der Apache-Lizenz, Version 2.0, lizenziert.
Diese Frage ( Deaktivieren von Safari Reader auf einer Webseite ) enthält weitere Details. Hier kopiert:
Ich bin gespannt, was die Reader-Option in Safari auslöst und was nicht. Ich würde nicht vorhaben, etwas zu implementieren, das es deaktivieren würde, aber als technische Übung neugierig.
Folgendes habe ich bisher mit einigen grundlegenden Informationen gelernt:
Sie benötigen mindestens ein H-Tag. Es hängt nicht nur von der Anzahl der Zeichen ab, sondern auch von der Anzahl der P-Tags und der Länge. Sucht wahrscheinlich nach Satzumbrüchen '.' und andere Kriterien Safari stellt dem 'Reader' ein H-Tag und Folgendes zur Verfügung:
1 P-Tag, 2417 Zeichen 4 P-Tags, 1527 Zeichen 5 P-Tags, 1150 Zeichen 6 P-Tags, 862 Zeichen Wenn Sie 1 Zeichen von einem der oben genannten Zeichen abziehen, ist die Option "Reader" nicht verfügbar.
Ich sollte beachten, dass die Zeichenanzahl des H-Tags eine Rolle spielt, dies aber leider nicht erkannt hat, als ich die obigen Ergebnisse ermittelt habe. Nehmen Sie mehr als 20 Zeichen für das H-Tag an und korrigieren Sie diese in den obigen Ergebnissen.
Einige andere interessante Dinge:
Durch das Festlegen von P-Tags werden sie aus der Anzeige für die Zählung entfernt, und wenn sie 230 ms später mit Javascript angezeigt werden, wurde auch die Option Reader vermieden
Es würde mich interessieren, ob jemand dies vollständig bestimmen kann.
Das HTML5-Artikel-Tag löst es bei meinen Tests nicht aus. Es scheint auch nicht mit Offline-Inhalten zu funktionieren (dh Seiten, die auf Ihrem lokalen Computer gespeichert sind).
Was es auszulösen scheint, ist ein Div-Block mit vielen Ps mit viel Text.
<article>auf meiner Website und Reader arbeitet dort, z. B. mathiasbynens.be/notes/html5-levels, aber nicht bei kleineren Artikeln, z. B. mathiasbynens.be/notes/document-head. Die Verwendung von <article>scheint nichts damit zu tun zu haben .
<div>, <article>, <section>... Auch seltsame Sachen wie <nav>, <aside>oder <span>funktionieren. Lesen Sie hier mehr: mathiasbynens.be/notes/safari-reader
Die p-Tag-Theorie klingt gut. Ich denke, es erkennt auch andere Elemente. Eine unserer Seiten mit 6 Absätzen hat den Reader nicht ausgelöst, eine mit 4 Absätzen und einem img-Tag jedoch.
Es ist auch intelligent genug, um mehrseitige Artikel zu erkennen. Probieren Sie es in einem mehrseitigen Artikel auf nytimes.com oder nymag.com aus. Würde mich interessieren, wie es das auch erkennt.
So überraschend es auch sein mag, das HTML5-Artikel-Tag wird in der Tat nicht beachtet, was besonders enttäuschend ist, da Safari 5 Artikel, Abschnitte, Navigationselemente usw. in CSS vollständig unterstützt - sie können jetzt wie ein Div gestaltet werden. und verhalten sich wie jedes Element auf Blockebene.
Ich hatte speziell eine Site mit einem Artikel-Tag und mehreren Tags für den inneren Abschnitt eingerichtet, um die semantische HTML5-Beschriftung für genau diesen Zweck vorzubereiten, und hoffte wirklich, dass Safari 5 dies für Reader verwenden würde. Kein solches Glück - sollte wahrscheinlich einen Fehler melden, da dies sehr sinnvoll wäre. Tatsächlich werden die meisten Unterüberschriften der Stufe h2 auf der Seite, die jeweils als Abschnitt markiert sind, vollständig ignoriert, und es wird nur der einzelne Div angezeigt, der den zuvor genannten Kriterien entspricht.
Ironischerweise erkennt die alte Version derselben Site, die weder Artikel, Abschnitt noch separate div-Tags enthält, den gesamten Körper für die Anzeige in Reader.
<article>ist ein gültiger Wrapper, der von Safari Reader erkannt wird und einwandfrei funktioniert. Siehe meinen Kommentar zu dieser Antwort für einige Beispiele: stackoverflow.com/questions/2997918/…
Sowohl Firefox als auch Chrome haben das ähnliche Plugin namens iReader. Hier ist sein Projekt mit Quellcode.
http://code.google.com/p/ireader-extension/
Lesen Sie den Code, um mehr zu erfahren.
Siehe Artikelveröffentlichungsrichtlinien .
Hier sind APIs zum Lesen und Analysieren: Readability Developer APIs . Es gibt bereits ein Projekt, auf das Sie verweisen können: Ruby-Lesbarkeit .
Ein kurzer Verlauf: Die Safari Reader-Funktion, seit Apples Safari 5-Browser eine Codebasis mit dem Namen Lesbarkeit eingebettet hat , und Lesbarkeit begann als einfaches, auf Javascript basierendes Lesetool, das jede Webseite in eine anpassbare Leseansicht verwandelte. Es wurde Anfang 2009 von Arc90 (als Arc90 Lab-Experiment), einem in New York City ansässigen Design- und Technologie-Shop, veröffentlicht. Es ist auch in Amazon Kindle und beliebte iPad-Anwendungen wie Flipboard und Reeder eingebettet.
Ich arbeite an Algorithmen zum Reinigen von Websites von "Verschwendung" von Informationen, ähnlich der Safari Reader-Funktion. Es ist nicht so gut wie Lesbarkeit, hat aber einige coole Sachen.
Weitere Informationen finden Sie auf der Projektseite smartbrowser.codeplex.com .