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?
ios5
safari
mobile-safari
bshack
quelle
quelle
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-3Ich habe hier weitere Details zu meinen Ergebnissen veröffentlicht: http://mathiasbynens.be/notes/safari-reader
quelle
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 lassenquelle
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:
Arc90 (Lesbarkeit) Copyright © Arc90 Inc. Die
Lesbarkeit wird unter der Apache-Lizenz, Version 2.0, lizenziert.
quelle
Diese Frage ( Deaktivieren von Safari Reader auf einer Webseite ) enthält weitere Details. Hier kopiert:
quelle
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.
quelle
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.
quelle
<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-readerDie 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.
quelle
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.
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/…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.
quelle
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.
quelle
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 .
quelle