Ein Printstylesheet für den Blog

Dieser Blog hat neues CSS für die Druckdarstellung bekommen. Der Artikel zur Witcherserie als Beispiel sieht im Web so aus:

Ausgedruckt – bzw mittels der Druckfunktion zum PDF umgewandelt – und dabei auf ein Blatt herunterskaliert kommt das dabei raus:

Erreicht wird die angepasste Darstellung durch dieses CSS, das ich einfach der regulären CSS-Datei hinzugefügt habe:

@media print {
    #serendipitySideBarContainer {
        display: none;
    }
    #content {
        width: 100%;
    }
    #serendipityCommentFormC {
        display: none;
    }
    .shariff {
        display: none;
    }
    .dsgvo_gdpr_footer {
        display: none;
    }
    #siteNav {
        display: none;
    }
    body {
        font-family: Iowan Old Style, Apple Garamond, Baskerville, Droid Serif, Times, Source Serif Pro, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Times New Roman, serif;
        border: none;
    }
    html {
        background-color: white;
    }
    .serendipity_entry_body {
        column-width: 17em;
        column-gap: 3em;
    }
    .serendipity_entry_body a[href*='//']::after, serendipity_commentBody a[href*='//']::after {
        content: " (" attr(href) ")";
    }
    a {
        color: black !important;
        text-decoration: underline !important;
    }
    #serendipity_banner {
        display: none;
    }
    #mainpane::before {
        content: "onli-blogging";
        display: block;
    }
    .serendipity_title a {
        text-decoration: none !important;
    }
    .serendipity_title, .serendipity_date {
        break-after: avoid;
        break-after: avoid-page;
    }
    br + .serendipity_commentsTitle, .nocomments {
        display: none;
    }
    .serendipity_entryFooter, .serendipity_comment footer {
        display: none;
    }
}

Wer das in seinen eigenen Serendipity-Blog übernehmen will müsste manche der Klassen wahrscheinlich anpassen, denn mein Design basiert mit codeschmiede auf älteren Code, den ich selbst nach HTML5 umgewandelt habe. Deswegen gibt es ein paar Unterschiede bei den Klassennamen zu 2k11 und anderen modernen Themes. Aber die Grundideen sind:

Ausgeblendete Seitenleiste und andere Elemente

Wer einen Artikel ausdrucken will kann auf dem Papier mit den Links in der Seitenleiste nichts anfangen, daher konnte die weg. Dazu habe ich den Header, der bei Einzelartikeln nur den Artikeltitel doppelte, den Footer des Blogs, die Artikelunterzeile und das Kommentarformular ausgeblendet.

Links ohne Farbe

Links sind hier im Blog normalerweise farblich markiert. In der Druckversion sind sie stattdessen schwarz, aber unterstrichen, und ihnen folgt das Linkziel als Text.

Serif-Schriftart

Für das richtige Papierdesign. Übernommen vom systemfontstack – es war gar nicht so einfach, passende Systemschriftarten für Serif- statt Sans-Serif-Schriftarten zu finden – aber leicht angepasst, denn Times New Roman war mir zu prominent platziert.

Spaltenansicht

Der Artikel wird wenn Platz ist in Spalten aufgeteilt. Auf dem Bild oben sind mehr Spalten als normal, da die Skalierung auf 60% reduziert war. Normalerweise sind es bei Din-A4 zwei Spalten im Querformat und nur eine, wie am Monitor, im Hochformat. Die Idee habe ich von sitepoint übernommen.

Titel hinzugefügt

Damit der Blogname trotz ausgeblendetem Header wenigstens irgendwo auftaucht wird er als Pseudoelement vor den Artikel gepackt.

---

Ganz bewusst nicht ausgeblendet sind die Kommentare, denn die könnten ja zum Artikel beitragen bzw das sein, was jemand ausdrucken wollte. Und auch das Videoelement ist absichtlich noch da, denn ohne es würde dieser Abschnitt des Artikel fehlerhaft wirken. Man kann es zwar nicht anklicken, aber sieht so zumindest dass es da war.

Insgesamt ging es also darum die Artikel auf dem Papier lesbarer zu machen, interaktive Elemente möglichst zu entfernen und auch die angezeigten Farben auf ein Minimum zu reduzieren. Damit wenn schon etwas ausgedruckt wird, es möglichst sparsam geschieht und das Ergebnis so lesbar wie möglich ist.