Bau deinen eigenen Lesemodus — eine Seite auf ihren Inhalt reduzieren
Browser haben einen Lesemodus, aber er ist Glückssache — auf einer Seite löst er nicht aus, auf einer anderen schneidet er zu viel weg, und feinjustieren kannst du ihn nicht. In JustZix baust du deinen eigenen: ein Aktions-Button, der die Seite auf den Artikel selbst reduziert, nach deinen Regeln.
Warum ein eigener
Der eingebaute Lesemodus ist eine Blackbox. Du weißt nicht, wann er erscheint, du kannst nicht beeinflussen, was er als „Inhalt" ansieht, du kannst die Typografie nicht ändern. Deine eigene Regel ist ein Dutzend Zeilen, die du verstehst und nach deinem Geschmack anpasst.
Am besten als BUTTON-Aktion
Du willst den Lesemodus selten automatisch an — du willst ihn auf Abruf. Das macht ihn zum idealen Kandidaten für eine BUTTON-Aktion in der JustZix-Aktionsleiste. Beschrifte ihn etwa mit READ, mit Code, der beim Klick läuft:
const art = document.querySelector(
'article, [role="main"], main, .entry-content, .post-content'
);
if (!art) { alert('Kein Inhalts-Container gefunden.'); }
else {
document.body.replaceChildren(art);
document.body.style.cssText =
'max-width:70ch;margin:40px auto;padding:0 24px;' +
'font:19px/1.7 Georgia, serif;background:#fbfaf7;color:#222';
}Wie es funktioniert
Den Inhalts-Container wählen
querySelector bekommt eine Liste von Kandidaten von am verlässlichsten bis am wenigsten: <article>, ein Element mit role="main", <main>, dann verbreitete CMS-Klassen. Es nimmt das erste, das existiert. Für eine Seite, auf der nichts passt, füge ihren eigenen Selektor an den Anfang der Liste.
replaceChildren
document.body.replaceChildren(art) wirft alles aus dem <body> und setzt nur den Artikel-Container hinein. Ein Aufruf statt einer Schleife, die Element für Element entfernt.
Typografie
max-width:70ch gibt eine Zeile von etwa 70 Zeichen Länge — das Lesbarkeitsoptimum. Der Rest ist Rand, eine Serifenschrift und ein warmer Hintergrund. Ändere es nach deinem Geschmack.
Die Nur-CSS-Variante
Wenn die Seite ein sauberes <article> hat, kannst du das JS auslassen — im CSS-Tab der Regel:
body > *:not(:has(article)) { display: none !important; }
article {
max-width: 70ch !important;
margin: 40px auto !important;
font-size: 19px !important;
line-height: 1.7 !important;
}Die CSS-Variante ist weniger verlässlich (sie hängt von der Seitenstruktur ab), aber sie fasst das DOM nicht an — leicht abzuschalten.
Fallstricke
- Bilder im Inhalt bleiben. Sie sind Kinder des Artikels, also überleben sie — was gut ist.
- replaceChildren ist einseitig. Nach dem Reduzieren kehrst du mit einem Neuladen (F5) zur normalen Seite zurück. Das ist für eine Auf-Abruf-Aktion akzeptabel.
- Die Skripte der Seite können protestieren. Ein Teil des Seitencodes verlässt sich auf Elemente, die wir entfernt haben, und wirft einen Fehler in der Konsole. Den Inhalt macht das nicht kaputt.
Siehe auch
- Beispiele — fertige Snippets für Aktionen und Regeln
- Sticky-Elemente zähmen — eine leichtere Art, eine Seite zu entrümpeln
- Die BUTTON-Aktion — der Aktionstyp, auf dem du das aufbaust
Installiere JustZix — und lies Artikel ohne den Rest der Seite.
Bewerte diesen Beitrag
Noch keine Bewertungen — sei der Erste.