QVINTVS · SCRIBET

Drucken aus Firefox-Leseansicht verschönern (Update 11.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.

Ich muß im Rahmen meines Studiums sehr viel Text lesen und nehme für mich deshalb das Recht in Anspruch, lange Texte auszudrucken. Das schont meine Augen deutlich mehr als ein Lesen am Bildschirm meines Laptops, der nur über eine Auflösung von 1366x768 Pixel verfügt. 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. Seit einiger Zeit verfolgte ich deshalb den Gedanken, ein Programm zur druckerfreundlichen Umgestaltung von Webseiten zu erstellen.

Update (11.07.2018): Ich bin darauf hingewiesen worden, daß der hier vorgestellte Tip nur mit bestimmten Firefox-Versionen funktioniert. Ich setze derzeit den unter Debian 9.4 „Stretch“ in den Repositorien enthaltenen Firefox ESR 52.9.0 64-bit ein. Unter Firefox 61 scheint das Verfahren nicht mehr zu funktionieren, da @-moz-document aus Firefox entfernt wurde. Wenn bei mir ein Update auf eine neuere Firefox-Version ansteht, werde ich nach einer Alternative zum hier dargestellten Weg suchen.

Mein 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 meine 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 mir 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.

Valete.