Drucken aus Firefox-Leseansicht verschönern

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?

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.