← Alle Beiträge

Anleitungen

Bauen Sie Ihren eigenen Lesemodus mit JustZix

Browser-Lesemodi sind großartig, bis sie das eine Bild entfernen, das Sie wollten, Code-Blöcke verstümmeln oder sich ganz weigern auszulösen. Mit JustZix können Sie Ihren eigenen Lesemodus bauen, der genau so funktioniert, wie Sie es mögen, auf genau den Seiten, die Sie wählen.

Warum einen eigenen bauen

Der eingebaute Lesemodus ist eine Blackbox. Sie können seine Zeilenlänge nicht anpassen, Sie können keine Abbildungen behalten, und er scheitert oft an Seiten, die keine klassischen Artikel sind. Eine JustZix-Regel hingegen ist einfach CSS, das Sie steuern. Sie läuft auf der echten Seite, sodass Links, Code und Medien alle weiterhin funktionieren. Sie entscheiden, was bleibt und was geht.

Schritt eins: die Artikelspalte zähmen

Der größte einzelne Lesbarkeitsgewinn ist die Begrenzung der Zeilenlänge. Zeilen, die länger als etwa 75 Zeichen sind, zwingen Ihre Augen, zu weit zu wandern, und Sie verlieren beim Rücksprung Ihren Platz. Zentrieren Sie die Hauptspalte und begrenzen Sie ihre Breite:

article, .post-content, main {
  max-width: 68ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 1.5rem !important;
}

Die Einheit ch ist an die Breite des 0-Zeichens gebunden, sodass 68ch unabhängig von der Schriftgröße nahe am klassischen 66-Zeichen-Ideal landet. Passen Sie die Selektorliste an Ihre Zielseite an.

Schritt zwei: den Text öffnen

Die Standard-Zeilenhöhe auf Nachrichtenseiten ist oft beengte 1,4. Das Lesen ist weit angenehmer um 1,7 herum, mit einer etwas größeren Schriftgröße und einer Serifen- oder humanistischen serifenlosen Schrift:

article p, .post-content p {
  font-size: 1.18rem !important;
  line-height: 1.75 !important;
  margin-bottom: 1.4em !important;
  font-family: Georgia, 'Iowan Old Style', serif !important;
}
article h2, article h3 {
  line-height: 1.3 !important;
  margin-top: 2em !important;
}

Schritt drei: klar Schiff machen

Jetzt den Lärm ausblenden. Seitenleisten, fixierte Kopfzeilen, Newsletter-Einblendungen und Spalten mit verwandten Inhalten konkurrieren alle um Aufmerksamkeit. Eine pauschale Anzeigeregel fegt sie weg:

aside,
.sidebar,
.newsletter-signup,
.related-posts,
[class*="sticky"],
[id*="recirculation"] {
  display: none !important;
}
body { overflow-x: hidden !important; }

Seien Sie etwas konservativ mit Attributselektoren wie [class*="sticky"] — testen Sie die Seite und entfernen Sie jeden Selektor, der etwas ausblendet, das Sie behalten wollten.

Es als Regel zusammensetzen

Erstellen Sie in JustZix eine neue Regel, setzen Sie das URL-Muster auf die Seite, die Sie am meisten lesen (zum Beispiel *://*.example-news.com/*), fügen Sie alle drei CSS-Blöcke in den CSS-Bereich ein und speichern Sie. Jeder passende Artikel öffnet sich nun automatisch in Ihrem persönlichen Lesemodus.

Ein ruhiger Hintergrund

Reines Weiß bei voller Helligkeit ist am Abend hart. Ein sanfter Cremeton reduziert die Blendung ohne den Kontrastverlust eines schweren dunklen Themes:

html, body, article {
  background: #f6f1e6 !important;
  color: #2b2620 !important;
}
article a { color: #7a4a1f !important; }

Von hier aus können Sie weiter verfeinern: das Inhaltsverzeichnis anheften, dem aktuellen Absatz eine Fokus-Hervorhebung hinzufügen oder ein Lesezeit-Abzeichen einblenden. Durchstöbern Sie unsere fertigen Beispiele für weitere Ausgangspunkte, sehen Sie den Begleitbeitrag zum genau richtigen Einstellen der Spaltenbreite und laden Sie JustZix herunter, falls Sie es noch nicht getan haben. Lesemodus, nach Ihrer Art.

Bewerte diesen Beitrag

Noch keine Bewertungen — sei der Erste.

Probiere es selbst aus

Installiere JustZix und füge ein beliebiges Snippet aus diesem Artikel ein. Zwei Minuten von null bis zu einer funktionierenden Regel auf allen deinen Geräten.

JustZix holen

Funktionen · So funktioniert es · Beispiele · Anwendungsfälle