Wie funktioniert die Firefox Reader-Ansicht?

Question 1

Zusammenfassung

Ich suche nach den Kriterien, nach denen ich eine Webseite erstellen kann, und bin [ziemlich] sicher, dass sie auf Wunsch des Benutzers in der Firefox Reader-Ansicht angezeigt wird.

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

Frage

Ich habe meinen Firefox von 38.0.1 auf 38.0.5 aktualisieren lassen und eine neue Funktion namens ReaderView gefunden - eine Art Überlagerung, die "Seitenunordnung" beseitigt und das Lesen von Text erleichtert. Die Leseransicht befindet sich auf der rechten Seite der Adressleiste als anklickbares Symbol auf bestimmten Seiten.

Das ist in Ordnung, aber aus programmtechnischer Sicht möchte ich wissen, wie "Reader View" funktioniert und auf welche Kriterien welche Seiten angewendet werden. Ich habe die Mozilla Firefox-Website ohne klare Antworten erkundet (abgesehen von allen Programmierantworten jeglicher Art, die ich gefunden habe). Ich habe dies natürlich gegoogelt / gebingelt und dies kam nur mit Verweisen auf Firefox-Addons zurück - dies ist kein Addon aber ein wesentlicher Bestandteil der neuen Firefox-Version.

Ich ging davon aus, dass Readerview HTML5 verwendet und <article>Inhalte extrahieren würde, aber dies ist nicht der Fall, da es auf Wikipedia funktioniert, das keine <article>oder ähnliche HTML5-Tags zu verwenden scheint. Stattdessen extrahiert die Readview bestimmte <div>s und zeigt sie alleine an. Diese Funktion funktioniert auf einigen HTML5-Seiten - wie z. B. Wikipedia -, auf anderen jedoch nicht.

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

Question 2

Sie benötigen mindestens ein <p>Tag um den Text, das Sie in der Reader-Ansicht sehen möchten, und mindestens 516 Zeichen in 7 Wörtern im Text.

Dies löst beispielsweise die ReaderView aus:

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

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

Question 3

Lesen durch den GitHub - Code, an diesem Morgen, der Prozess ist , dass Seitenelemente in einer likelyhood Reihenfolge aufgelistet - mit <section>, <p>, <div>, <article>an der Spitze der Liste (dh höchstwahrscheinlich).

Dann erhält jeder dieser "Knoten" eine Bewertung, 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 Textblöcke hinzugefügt werden, aber auch Partituren für ungültige Teile oder Syntax scheinbar reduziert werden. Bewertungen in Unterteilen von "Knoten" spiegeln sich in der Bewertung des gesamten Knotens wider. dh das übergeordnete Element enthält die Punktzahlen aller unteren Elemente, denke ich.

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

Ich bin mir nicht ganz 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 bereitgestellten Link ( https://github.com/mozilla/readability ) überprüfen und prüfen, ob er eine gründlichere Antwort geben kann.

Was ich nicht gesehen habe, aber erwartet habe, war die Punktzahl basierend auf der Menge an Textinhalten in einem <p>oder einem <div>(oder anderen) relevanten Tags.

Verbesserungen an dieser Frage oder Antwort, bitte teilen !!

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

Question 4

Ich folgte Martins Link zum GitHub-Repository von Readability.js und sah mir den Quellcode an. Folgendes mache ich daraus.

Der Algorithmus arbeitet mit Absatz-Tags. Zunächst wird versucht, Teile der Seite zu identifizieren, die definitiv nicht inhaltlich sind - wie Formulare usw. - und diese zu entfernen. Anschließend werden die Absatzknoten auf der Seite durchlaufen und anhand des Inhaltsreichtums eine Punktzahl zugewiesen: Sie erhalten 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.

Die Punktzahlen "sprudeln" dann in den DOM-Baum: Jeder Absatz fügt einen Teil seiner Punktzahl zu allen übergeordneten Knoten hinzu - ein direkter Elternteil erhält die volle Punktzahl zu seiner Gesamtsumme, ein Großelternteil nur zur Hälfte, ein Urgroßelternteil ein Drittel und so weiter auf. Auf diese Weise kann der Algorithmus übergeordnete Elemente identifizieren, die wahrscheinlich den Hauptinhaltsbereich bilden.

Obwohl dies nur der Firefox-Algorithmus ist, denke ich, wenn er für Firefox gut funktioniert, funktioniert er auch für andere Browser.

Damit diese Reader View-Algorithmen für Ihre Website funktionieren, sollen sie die inhaltsintensiven Abschnitte 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:

Verwenden Sie Absatz-Tags in Ihrem Inhalt! Viele Leute neigen dazu, sie zugunsten von <br />Tags zu übersehen . Obwohl es ähnlich aussehen mag, stützen sich viele inhaltsbezogene Algorithmen (nicht nur Reader View-Algorithmen) stark auf sie.
Verwenden Sie HTML5 semantische Elemente in Ihrem Markup, wie <article>, <nav>, <section>, <aside>. Obwohl dies nicht das einzige Kriterium ist (wie Sie in der Frage festgestellt haben), sind diese für Computer, die Ihre Seite lesen (nicht nur für die Leseransicht), 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.
Wickeln Sie Ihren Hauptinhalt wie ein <article>oder <div> -Element in einen Container . Dies erhält Punkte von allen darin enthaltenen Absatz-Tags und wird als Hauptinhaltsabschnitt identifiziert.
Halten Sie Ihren DOM-Baum in inhaltsdichten Bereichen flach. Wenn Sie viele Elemente haben, die Ihren Inhalt aufteilen, erschweren Sie dem Algorithmus nur das Leben: Es gibt kein einziges Element, das als übergeordnetes Element vieler inhaltsintensiver Absätze hervorsticht, sondern viele separate mit niedrigen Punktzahlen.