web-dev-qa-db-ger.com

Wie aktiviere ich iOS 5 Safari Reader auf meiner Website?

Wie funktioniert die Reader-Funktion von Mobile Safari in iOS 5? Wie aktiviere ich es auf meiner Site? Wie erkläre ich, welcher Inhalt auf meiner Seite ein Artikel ist, um diese Funktion auszulösen?

75
bshack

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

  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 eines gibt, außer <body> oder <p>. Sie können <article>, <div>, <section>; oder Elemente, die für diesen Zweck semantisch inkorrekt sind, wie <nav>, <aside>, <footer>, <header>; oder sogar Inline-Elemente wie <span> (!).

  2. Es sind keine Überschriften erforderlich, damit Reader funktioniert. Hier ist ein Beispiel für ein Dokument ohne <h*> Elemente, auf denen Reader funktioniert: http://mathiasbynens.be/demo/safari-reader-test-

Ich habe hier weitere Details zu meinen Ergebnissen gepostet: http://mathiasbynens.be/notes/safari-reader

67
Mathias Bynens

Es scheint, dass der Algorithmus, auf dem er basiert, nach p-Tags sucht und Trennzeichen wie "." im innentext. 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 schreibt Safari dies in den Acknowledgements zu, siehe:

file: /// C: /Program%20Files/Safari/Safari.resources/Help/Acknowledgments.html

Arc90 (Lesbarkeit) Copyright © Arc90 Inc.
Lesbarkeit wird unter der Apache-Lizenz, Version 2.0, lizenziert.

7
tantran

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 habe ich festgestellt:

  • Der Artikel, den Sie auslösen möchten, muss mindestens 200 Wörter (oder 1000 Zeichen einschließlich Leerzeichen) enthalten
  • 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 keine Story enthalten) zählen nicht zu den 200 Wörtern (sie werden jedoch im Reader angezeigt, wenn der Reader aus anderen Gründen ausgelöst wird)
  • Umhüllen der 200 Wörter mit einem Blockelement wie <div> oder <article> erscheint 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 ist hier, was ich fand, hatte keinen Einfluss:

  • Ob mit oder ohne Header
  • Ob der Text in ein <p> oder frei fließen lassen
  • Interpunktionen (dh das Entfernen aller Punkte, Kommas usw. hatte keine Auswirkung)
7
eriklinde

Diese Frage ( So deaktivieren Sie Safari Reader auf einer Webseite ) enthält weitere Informationen. 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 ein paar einfachen Herumspielen gelernt:

Sie benötigen mindestens ein H-Tag. Es hängt nicht nur von der Anzahl der Zeichen ab, sondern von der Anzahl der P-Tags und der Länge. Sucht wahrscheinlich nach Satzumbrüchen '.' und andere Kriterien Safari stellt den "Reader" bereit, wenn er mit einem H-Tag versehen ist und die folgenden Bedingungen erfüllt:

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 subtrahieren, ist die Option "Reader" nicht verfügbar.

Ich sollte beachten, dass die Anzahl der Zeichen des H-Tags eine Rolle spielt, habe dies aber leider nicht bemerkt, als ich die obigen Ergebnisse ermittelt habe. Angenommen, es werden mehr als 20 Zeichen für das H-Tag verwendet, die in den obigen Ergebnissen korrigiert wurden.

Einige andere interessante Dinge:

Durch die Einstellung für P-Tags werden sie aus der Anzeige für die Zählungseinstellung auf "Keine" entfernt und 230 ms später mit JavaScript angezeigt. Dadurch wurde auch die Reader-Option vermieden

Es würde mich interessieren, ob jemand dies vollständig bestimmen kann.

3
yrn1

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

Ich habe keine Hülle um den Körper gelegt, es könnte aber ein Versehen gewesen sein.

2
dan

Siehe Article Publishing Guidelines .

Hier sind APIs zum Lesen und Parsen: Readability Developer APIs . Es gibt bereits ein Projekt, auf das Sie verweisen können: Ruby-Lesbarkeit .

Eine kurze Geschichte: Die Safari Reader-Funktion, seit Apples Safari 5-Browser eine Codebasis mit dem Namen Lesbarkeit eingebettet hat, und Readability starteten als einfaches, Javascript-basiertes Lesetool, mit dem jede Webseite in eine anpassbare Leseansicht umgewandelt wurde. Es wurde von Arc9 (als Arc90 Lab-Experiment), einem in New York City ansässigen Design- und Technologie-Shop, Anfang 2009 veröffentlicht. Es ist auch in Amazon Kindle und beliebte iPad-Anwendungen wie Flipboard und Reeder integriert .

1
Allen

Überraschenderweise wird das HTML5-Artikel-Tag 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 Divs gestaltet werden. und verhalten sich genauso wie jedes Element auf Blockebene.

Ich hatte speziell eine Site mit einem Artikel-Tag und mehreren Tags für den inneren Abschnitt eingerichtet, um semantische HTML5-Beschriftungen für genau diesen Zweck vorzubereiten, und ich hoffte wirklich, dass Safari 5 diese 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. Es wird nur der einzelne Div angezeigt, der die zuvor genannten Kriterien erfüllt.

Ironischerweise erkennt die alte Version derselben Site, die weder Artikel, Abschnitte noch Div-Tags enthält, den gesamten Text für die Anzeige in Reader.

1
Marc

Das HTML5-Artikel-Tag löst es bei meinen Tests nicht aus. Es scheint auch nicht mit Offline-Inhalten zu funktionieren (d. H. Seiten, die auf Ihrem lokalen Computer gespeichert sind).

Was anscheinend auslöst, ist ein div-Block mit vielen ps und viel Text.

1
yrn1

Sowohl Firefox als auch Chrome haben das ähnliche Plugin namens iReader. Hier ist das Projekt mit dem Quellcode.

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

Lesen Sie den Code, um mehr zu erfahren.

1
Smartmarkey

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.

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.

1
user139195

Ich arbeite an Algorithmen, um Websites von Informationsabfällen zu säubern, ähnlich der Safari Reader-Funktion. Es ist nicht so gut wie die Lesbarkeit, hat aber einige coole Sachen.

Weitere Informationen finden Sie unter smartbrowser.codeplex.com Projektseite.

0
sashaeve