Drucken aus Firefox-Leseansicht verschönern
Marvin Gülker · 09.07.2018
Die Firefox-Leseansicht kann so konfiguriert werden, daß man aus ihr heraus einigermaßen ansehnlich drucken kann, ohne Unmengen von Papier zu verschwenden.
Kategorien: Software
Wer kraft Studiums oder Berufs viel lesen muß, darf für sich das Recht in Anspruch nehmen, lange Texte auszudrucken, denn dies schont die Augen. Der Ausdruck von typischen Webseiten verschlingt allerdings Unmengen Papier und das bildschirmlastige CSS-Design ist in aller Regel eher schlecht als recht fürs Drucken geeignet. Viel zu große Schriften, viel zu viele Farben, etc. Es stellt sich daher die Frage: kann man nicht ein Programm zur druckerfreundlichen Umgestaltung von Webseiten erstellen?
Update (11.07.2018):
Ein Leser weist darauf hin, daß der hier vorgestellte Tip nur
mit bestimmten Firefox-Versionen funktioniert. Eingesetzt wurde hier der
unter Debian 9.4 „Stretch“ in den Repositorien enthaltene Firefox ESR
52.9.0 64-bit. Unter Firefox 61 scheint das Verfahren nicht mehr
zu funktionieren, da @-moz-document
aus Firefox entfernt wurde.
Ein erster Gedanke ging dahin, die Seiten von HTML nach LaTeX zu übersetzen und dann von LaTeX aus ein PDF zu erzeugen, das sich ausdrucken ließe. Das hat sich aber als schwierig herausgestellt. Seit mit CSS3 aber auch druckerfreundliche Gestaltungen möglich sind, besteht dafür auch kein Grund mehr. Zwar läßt sich HTML selbst unter Einsatz von viel CSS niemals so schön für den Druck aufbereiten wie LaTeX, aber die Ergebnisse sind jedenfalls für einfachere Bedürfnisse – einmaliges Ausdrucken und Lesen langer Artikel – ausreichend. Für Langzeitarchivierung ist der hier vorgestellte Ansatz aber deshalb ungeeignet.
Mit CSS3 ist zwar die Notwendigkeit der Konvertierung von HTML nach LaTeX entfallen, aber es stellt sich ein anderes Problem. Webseiten sind sehr unterschiedlich strukturiert und die Erstellung einer Heuristik, mit der der Hauptinhalt extrahiert wird, war für ein bloßes Seitenprojekt zu viel Aufwand. Nun besitzt aber der Webbrowser Mozilla Firefox seit einiger Zeit eine Leseansicht, die Webseiten auf ein simples und textzentrisches Aussehen vereinheitlicht. Die Leseansicht enthält offenbar eine entsprechende Heuristik, denn sie findet den Hauptinhalt verschiedenster Webseiten in aller Regel recht zuverlässig heraus. Wirft man einen Blick in das erstellte HTML der Leseansicht, so stellt man fest, daß jedenfalls das Grundgerüst um den Hauptinhalt auch für verschiedene Webseiten einheitlich ist. Damit ist die Leseansicht der ideale Kandidat für das Ausdrucken von textlastigen Webseiten.
Allerdings ist auch die Leseansicht nicht druckerfreundlich. Der linksbündige Flattersatz, der Zeilendurchschuß, die unmöglichen Ränder und die viel zu große Schrift sind vielleicht für Smartphones geeignet, aber nicht für A4-Papier. Erfreulicherweise läßt sich das CSS der Leseansicht aber anpassen.
Mithilfe der Datei userContent.css
läßt sich die Anzeige aller
Webseiten den lokalen Bedürfnissen
anpassen,
darunter auch die als Sonderseite ausgestaltete Leseansicht. Dazu öffnet
man zunächst das Profilverzeichnis des benutzten Firefox-Profils, indem
man auf der Sonderseite „about:support“ den Knopf „Ordner öffnen“
anklickt. Im dann geöffneten Ordner erstellt man einen neuen Unterordner
chrome
. In diesem wiederum legt man dann die Datei userContent.css
als Reintextdatei an; Windows-Nutzer achten darauf, nicht versehentlich
eine Datei userContent.css.txt
zu erstellen.
Mit dem folgenden, in diese Datei einzufügenden CSS wird sodann die Gestaltung der Leseansicht für den Druck optimiert. Die erstellten Dokumente sind zweispaltig, in Serifenschrift und mit den üblichen Einrückungen statt Leerzeilen zwischen den Absätzen gestaltet. Insgesamt ist das alles noch sehr roh, aber es ist eine Basis, von der ausgehend man sich leicht eine Druckgestaltung nach eigenem Geschmack erstellen kann.
@-moz-document url-prefix("about:reader") { @media print { body { font-family: "Times New Roman" !important; font-size: 11pt !important; text-align: justify; hyphens: auto; column-count: 2; column-gap: 4mm; padding: 0px !important; } div#container { margin: 0px !important; padding: 0px !important; max-width: none !important; font-size: 11pt !important; line-height: 1.2em !important; } div#container pre, div#container ul, div#container ol, div#container blockquote { line-height: 1.2em !important; margin: 1em 0px !important; } div#container p { line-height: 1.2em !important; text-indent: 2em; margin: 0px !important; padding: 0px !important; } div#container h1 + p, div#container h2 + p, div#container h3 + p, div#container h4 + p, div#container h5 + p, div#container h6 + p { text-indent: 0px; } @page { margin: 2cm 1cm !important; size: a4 portrait !important; } } }
@-moz-document url-prefix("about:reader")
erfaßt die Leseansicht.
Mithilfe der Media-Query @media print
wird der Effekt dieses CSS auf
den Ausdruck der Leseansicht beschränkt. Die „normale“ Nutzung bleibt
deshalb weiterhin möglich. Die für Nutzer-Stylesheets typischen
!important
-Markierungen – die im übrigen im Rahmen normaler
Webentwicklung tabu sind –, stellen sicher, daß diese Regeln nicht von
Firefox’ eigenen CSS-Regeln für die Leseansicht überschrieben werden.
Das CSS versucht, Silbentrennung mit hyphens: auto
einzuschalten.
Damit das funktioniert, muß die Zielseite die lang
und
xml:lang
-Attribute im (X)HTML gesetzt haben. Ist das nicht der Fall,
empfiehlt es sich, vor dem Druck kurz mit STRG+SHIFT+I die
Entwicklerwerkzeuge aufzurufen und diese Attribute dem
<html>
-Element hinzuzufügen.
<html lang="de" xml:lang="de">
Dies macht den eingeschalteten Blocksatz üblicherweise erheblich lesbarer.