Wie aktiviere ich iOS 5 Safari Reader auf meiner Website?

75

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?

bshack
quelle
Weitere Informationen zur Reader-Ansicht in Firefox finden Sie unter stackoverflow.com/questions/30730300/… .
behandeln

Antworten:

67

Viele der hier veröffentlichten Antworten enthalten falsche Informationen. Hier einige Korrekturen / Klarstellungen:

  1. 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>(!).

  2. 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

Mathias Bynens
quelle
8

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:

  • Es scheint notwendig zu sein, in dem Artikel, den Sie auslösen möchten, etwa 200 oder mehr Wörter (oder 1000 Zeichen einschließlich Leerzeichen) zu haben, um den "Reader" auszulösen
  • Der Leser wurde NIE ausgelöst, wenn ich weniger als 170 Wörter hatte; obwohl es manchmal ausgelöst wurde, wenn ich 180 oder 190 Wörter hatte.
  • Text in bestimmten Elementen wie <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).
  • Das Umschließen der 200 Wörter in ein Blockelement wie ein <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:

  • Ob mit einem Header oder nicht
  • Ob Sie den Text in a einwickeln <p>oder ihn frei fließen lassen
  • Interpunktionen (dh das Entfernen aller Punkte, Kommas usw. hatte keine Auswirkung)
eriklinde
quelle
7

Es 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.

Tantran
quelle
3

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.

yrn1
quelle
2
Falsch. Überschriftenelemente sind nicht erforderlich, damit der Reader funktioniert. Beispiel: mathiasbynens.be/demo/safari-reader-test-3 Lesen Sie hier mehr: mathiasbynens.be/notes/safari-reader
Mathias Bynens
2

Ich hatte damit zu kämpfen. Ich habe endlich die <ul>Markierungen in meiner Geschichte herausgenommen und Bratsche! es fing an zu arbeiten.

Ich habe keine Hülle um den Körper gelegt, habe es aber möglicherweise versehentlich getan.

Dan
quelle
1

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.

yrn1
quelle
Ich verwende <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 .
Mathias Bynens
1
Alle Wrapperelement tun - <div>, <article>, <section>... Auch seltsame Sachen wie <nav>, <aside>oder <span>funktionieren. Lesen Sie hier mehr: mathiasbynens.be/notes/safari-reader
Mathias Bynens
1

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.

user139195
quelle
1

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.

Marc
quelle
<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/…
Mathias Bynens
1
Ich war vielleicht nicht klar; Ich meinte, dass <article> nicht anders behandelt wird als ein reguläres <div>; Ich hatte gehofft, dass der Leser, wenn er ein <article> -Tag sieht, den Inhalt so behandelt, als ob er aus einem Block besteht, was nicht der Fall ist, es sei denn, der Inhalt entspricht den anderen Anforderungen. Das Ergebnis für mich ist, dass mein <Artikel> mehrere <Abschnitte> enthält und <div> Reader nur einen einzigen enthaltenen <Abschnitt> erfasst.
Marc
1

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.

Allen
quelle