webentwicklung-frage-antwort-db.com.de

Wie funktioniert die Firefox-Reader-Ansicht?

Zusammenfassung

Ich suche nach den Kriterien, anhand derer ich eine Webseite erstellen kann, und bin [ziemlich] sicher, dass sie in der Firefox Reader-Ansicht angezeigt wird, wenn der Benutzer dies wünscht.

Einige Sites haben diese Option, andere nicht. Einige mit mehr Text haben diese Option nicht als andere mit viel weniger Text. Beispielsweise zeigt der Stapelüberlauf in der Reader-Ansicht nur die Frage und keine Antworten an.

Frage

Mein Firefox wurde von 38.0.1 auf 38.0.5 aktualisiert und ich habe eine neue Funktion namens ReaderView gefunden - eine Art Overlay, mit der das Durcheinander von Seiten beseitigt und das Lesen von Text erleichtert wird. Die Leseübersicht befindet sich auf der rechten Seite der Adressleiste als anklickbares Symbol auf bestimmten Seiten.

Dies ist in Ordnung, aber aus der Sicht der Programmierung möchte ich wissen, wie die "Lesersicht" funktioniert, welche Kriterien für welche Seiten es gilt. Ich habe die Mozilla Firefox-Website ein wenig durchgesehen, ohne eindeutige Antworten zu erhalten (und alle Programmierantworten, die ich gefunden habe). Ich habe dies natürlich gegoogelt/Binged und dies kam nur mit Verweisen auf Firefox-Addons zurück - dies ist kein Addon Aber ein wichtiger Bestandteil der neuen Firefox-Version.

Ich habe angenommen, dass readerview HTML5 verwendet und <article> - Inhalte extrahieren würde, aber dies ist nicht der Fall, da es auf Wikipedia funktioniert, das anscheinend keine <article> - oder ähnlichen HTML5-Tags verwendet, sondern die readview-Extrakte bestimmte <div> und zeigt sie alleine an. Diese Funktion funktioniert auf einigen HTML5-Seiten - wie z. B. Wikipedia - aber nicht auf anderen.

Wenn jemand eine Idee hat, wie Firefox ReaderView tatsächlich funktioniert und wie dieser Vorgang von Website-Entwicklern verwendet werden kann, können Sie sie teilen? Oder wenn Sie herausfinden können, wo sich diese Informationen befinden, können Sie mich in die richtige Richtung lenken - da ich dies nicht finden konnte.

67
Martin

Du brauchst mindestens einen <p> Markieren Sie den Text, den Sie in der Reader-Ansicht sehen möchten, und mindestens 516 Zeichen in 7 Wörtern im Text.

dies wird zum Beispiel den ReaderView auslösen:

<body>
<p>
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789 123456
</p>
</body>

Siehe mein Beispiel unter https://stackoverflow.com/a/30750212/106908

54
rubo77

Wenn Sie heute Morgen den gitHub-Code durchlesen, werden die Seitenelemente in einer wahrscheinlichen Reihenfolge aufgelistet - mit <section>, <p>, <div>, <article> am Anfang der Liste (dh am wahrscheinlichsten).

Dann erhält jeder dieser "Knoten" eine Punktzahl, die auf Dingen wie Kommazahlen und Klassennamen basiert, die für den Knoten gelten. Dies ist ein etwas facettenreicher Prozess, bei dem Partituren für Textabschnitte hinzugefügt werden, aber auch Partituren für ungültige Teile oder Syntax anscheinend reduziert werden. Punktzahlen in Unterteilen von "Knoten" spiegeln sich in der Punktzahl des gesamten Knotens wider. Ich denke, das übergeordnete Element enthält die Bewertungen aller unteren Elemente.

Dieser Score-Wert entscheidet, ob die HTML-Seite in Firefox "angezeigt" werden kann.

Ich bin mir nicht sicher, ob der Score-Wert von Firefox oder von der Lesbarkeitsfunktion festgelegt wird.

Javascript ist wirklich nicht meine Stärke, und ich denke, jemand anderes sollte den von Richard ( https://github.com/mozilla/readability ) bereitgestellten Link überprüfen und nachsehen, ob er eine gründlichere Beschreibung liefern kann Antworten.

Was ich nicht gesehen habe, aber erwartet habe, war eine Punktzahl basierend auf der Menge des Textinhalts in einem <p> oder ein <div> (oder andere) relevante Tags.

Eventuelle Verbesserungen an dieser Frage oder Antwort teilen Sie uns bitte mit !!

BEARBEITEN: Bilder in <div> oder <figure> Tags (HTML5) innerhalb des <p> -Element scheint in der Reader-Ansicht beibehalten zu werden, wenn der Inhalt des Seitentexts gültig ist.

29
Martin

Ich folgte Martins Link zum Readability.js GitHub-Repository und sah mir den Quellcode an. Hier ist, was ich daraus mache.

Der Algorithmus arbeitet mit Absatzmarken. Zunächst wird versucht, Teile der Seite zu identifizieren, bei denen es sich definitiv nicht um inhaltliche Formulare usw. handelt, und diese werden entfernt. Anschließend werden die Absatzknoten auf der Seite durchlaufen und anhand der Inhaltsvielfalt eine Punktzahl zugewiesen: Sie gibt ihnen Punkte für die Anzahl der Kommas, die Länge des Inhalts usw. Beachten Sie, dass ein Absatz mit weniger als 25 Zeichen sofort verworfen wird.

Punktzahlen "sprudeln" dann in den DOM-Baum: Jeder Absatz addiert einen Teil seiner Punktzahl zu allen übergeordneten Knoten - ein direktes übergeordnetes Element erhält die volle Punktzahl, ein Großelternteil nur die Hälfte, ein Urgroßelternteil ein Drittel und so weiter auf. Auf diese Weise kann der Algorithmus übergeordnete Elemente identifizieren, bei denen es sich wahrscheinlich um den Hauptinhaltsabschnitt handelt.

Dies ist zwar nur der Algorithmus von Firefox, aber wenn er für Firefox gut funktioniert, funktioniert er auch für andere Browser.

Damit diese Reader View-Algorithmen für Ihre Website funktionieren, möchten Sie, dass sie die inhaltsintensiven Bereiche Ihrer Seite korrekt identifizieren. Dies bedeutet, dass die inhaltsintensiveren Knoten auf Ihrer Seite im Algorithmus hohe Punktzahlen erzielen sollen.

Hier sind einige Faustregeln, um die Qualität der Seite in den Augen dieser Algorithmen zu verbessern:

  1. Verwenden Sie Absatz-Tags in Ihrem Inhalt! Viele Leute neigen dazu, sie zugunsten von <br /> - Tags zu übersehen. Viele inhaltsbezogene Algorithmen (nicht nur Reader View-Algorithmen) stützen sich stark auf sie, auch wenn sie ähnlich aussehen mögen.
  2. Verwenden Sie in Ihrem Markup semantische HTML5-Elemente wie <article>, <nav>, <section>, <aside>. Auch wenn sie nicht das einzige Kriterium sind (wie Sie in der Frage festgestellt haben), sind sie für Computer, die Ihre Seite lesen (nicht nur die Reader-Ansicht), sehr nützlich, um verschiedene Abschnitte Ihres Inhalts zu unterscheiden. Readability.js verwendet sie, um zu erraten, welche Knoten wahrscheinlich oder unwahrscheinlich wichtige Inhalte enthalten.
  3. Wickeln Sie Ihren Hauptinhalt in einen Container wie ein <article> - oder <div> - Element. Dies erhält Punkte von allen darin enthaltenen Absatz-Tags und wird als Hauptinhaltsabschnitt identifiziert.
  4. Halten Sie Ihren DOM-Baum in inhaltsdichten Bereichen flach. Wenn Sie viele Elemente haben, die Ihren Inhalt aufteilen, machen Sie dem Algorithmus das Leben nur schwerer: Es wird kein einziges Element geben, das als übergeordnetes Element vieler inhaltsintensiver Absätze gilt, sondern viele separate mit niedrigen Werten.
20
Sean Bone