bk99.de druckbar gemacht: Was @media print auf dem Papier ändert

Zusammenfassung

Anlass war der Beitrag „Websites Should Be Printable“ von Brennen Puth, der am 26. Oktober 2026 auf Hacker News diskutiert wurde. Ein Probedruck zeigte, dass bk99.de bis dahin Menü, Sozialleiste und Inhaltsverzeichnis mitdruckte, ein Beitrag bis zu 14 Seiten brauchte und im Dark Mode hellgraue Schrift auf weißes Papier kam. Der Beitrag zeigt die Druckregeln, die seit dem 26. Oktober gelten, wie sie mit Hell und Dunkel zusammenspielen und wie sich das Ergebnis automatisch prüfen lässt.

Der Anlass

Brennen Puth liest viel auf Papier und wollte, dass seine eigene Seite sich ordentlich drucken lässt. Sein erster Versuch mit Strg+P war ernüchternd: Die Schrift war zwei Stufen zu groß, der Kopfbereich sah gedruckt hässlich aus, und die Links waren in Schwarzweiß nur noch grau. In seinem Beitrag zeigt er die Lösung mit wenigen Zeilen CSS: eine Klasse noPrint für alles, was nicht aufs Papier gehört, eine Klasse onlyPrint für Hinweise, die nur gedruckt erscheinen, 12 pt für den Fließtext und schwarze Links.

Eine Frage lässt er offen: Codeblöcke werden über Seitengrenzen zerschnitten, und er bittet um einen Vorschlag. Die Antwort steht weiter unten, denn bk99.de hatte dasselbe Problem.

Die Ausgangslage bei bk99.de

Bisher gab es in der Stilvorlage keine einzige Druckregel. Ein Probedruck per Playwright als PDF zeigte, was dabei herauskam: Sozialleiste, Hauptmenü mit allen Diensten, Brotkrumen, das Inhaltsverzeichnis, die Karten „Thematisch passend“ und die Fußzeile mit allen Links landeten auf dem Papier. Der Beitrag zur DNS-Sperre in Frankreich brauchte acht Seiten, der PHP2Shell-Beitrag vierzehn.

Schwerer wog ein Fehler, der erst beim Drucken auffällt: Die Farben von bk99.de hängen an Rollenvariablen, die der Dark Mode neu setzt, etwa --ink für die Schrift. Browser lassen beim Drucken die Hintergründe weg. Wer im Dark Mode druckte, bekam deshalb die hellgraue Schrift des dunklen Designs auf weißes Papier, kaum lesbar.

Was die Druckregeln tun

Alle Regeln stehen in einem Block @media print am Ende der Stilvorlage, rund 2,3 KB. Sie gelten für jeden Seitentyp, ohne dass eine Seite neu erzeugt werden muss.

Farben: Der Block setzt dieselben Rollenvariablen neu, die auch der Dark Mode benutzt, nur auf Schwarz und Weiß. Der Selektor :root:not([data-theme="light"]), :root[data-theme] greift in jedem Fall: ohne Umschalter, mit hellem und mit dunklem Design. Er ist genauso spezifisch wie die Dark-Mode-Regeln und gewinnt, weil er später in der Datei steht. Feste Farbwerte in einzelnen Regeln gibt es weiterhin nicht.

Weglassen: Sozialleiste, Design-Umschalter, Hauptmenü, Brotkrumen, Inhaltsverzeichnis, „Thematisch passend“, die Blätternavigation, die Knöpfe zum Original und zum Webarchiv, Suchfeld und Themenfilter, die Dienste der Startseite und die Linkliste der Fußzeile. Logo und Copyright-Zeile bleiben, damit klar ist, woher das Blatt stammt.

Schrift und Umbruch: 11 pt Fließtext, Überschriften 20, 14 und 12 pt. Überschriften bleiben mit dem folgenden Absatz zusammen (break-after: avoid), Absätze lassen mindestens drei Zeilen allein (orphans, widows).

Links: Auf Papier kann man nicht klicken, deshalb schreibt der Druck hinter jeden Link im Beitrag sein Ziel in Klammern, interne Links mit vorangestelltem bk99.de. Die Links der Metazeile (Datum, Quelle, Kategorie) sind ausgenommen, sie wären nur Rauschen.

@media print {
  .post-card-detail a[href^="http"]:not(.button)::after {
    content: " (" attr(href) ")";
    font-size: .8em; overflow-wrap: anywhere;
  }
  .post-card-detail a[href^="/"]:not(.button)::after {
    content: " (bk99.de" attr(href) ")";
  }
  .post-meta a::after { content: none !important; }
}

Codeblöcke: Das ist die Antwort auf Puths offene Frage. break-inside: avoid verbietet den Seitenumbruch innerhalb eines Blocks; passt er nicht mehr auf die Seite, beginnt er auf der nächsten. Dasselbe gilt für Abbildungen, Tabellen, Zitate, Listenpunkte der Wissensabschnitte und die Vorschaukarten in Übersicht und Archiv. Ein Block, der länger als eine Seite ist, wird trotzdem geteilt; das lässt sich nicht verhindern, nur durch white-space: pre-wrap wenigstens ohne abgeschnittene Zeilen.

Ausgeklappt und ohne YouTube: Eingeklappte Bereiche (details) druckt der Block geöffnet. Eingebettete Videos erscheinen als Titel mit Kanal, Länge und Adresse; der Player wird für den Druck nicht geladen.

Wie das Ergebnis geprüft wird

Ein kleines Skript startet denselben lokalen Server wie die Gestaltungsprüfung des Releases und druckt mit Playwright acht Seitentypen als A4-PDF: Startseite, Blogübersicht, Jahresarchiv, Impressum, einen kuratierten Beitrag deutsch und englisch, einen eigenen Beitrag mit vielen Codeblöcken und einen Beitrag mit Video. Das Ganze läuft zweimal, mit hellem und mit dunklem Farbschema. Der Text der beiden Fassungen ist identisch, die Seitenzahl ebenfalls.

Die Seitenbilder habe ich mir angesehen. Dabei fielen zwei Fehler auf, die eine reine Zählung nicht gefunden hätte: Die Metazeile bekam zunächst lange Adressen angehängt, und Vorschaukarten wurden an der Seitengrenze zerschnitten. Beides ist behoben. Dass Blogübersicht und Archiv dadurch teils eine Seite mehr brauchen, ist gewollt: Eine ganze Karte auf der nächsten Seite ist besser lesbar als zwei halbe.

Eine Falle beim Einbau: Die Stilvorlage, die der Build ausliefert, entsteht aus style.css im Projektverzeichnis; assets/style.css wird bei jedem Build überschrieben. Der erste Probedruck sah deshalb aus wie vorher.

Was bewusst fehlt

Die Adresse der gedruckten Seite steht nicht auf dem Blatt. CSS kann die aktuelle Adresse nicht auslesen, und ein Skript dafür wäre mehr Aufwand als Nutzen: Browser drucken die Adresse ohnehin in die Kopf- oder Fußzeile, wenn diese Option im Druckdialog aktiv ist.

Auch eine eigene Seitengröße ist nicht festgelegt. Der Block setzt nur Ränder (@page { margin: 16mm 15mm; }); ob A4 oder Letter, entscheidet der Drucker.

Zahlen im Überblick

• Beitrag zur DNS-Sperre: 5 statt 8 Seiten A4; PHP2Shell-Beitrag: 11 statt 14.
• Startseite: 2 statt 3 Seiten; Impressum: 1 statt 2; englischer Beitrag zur DNS-Sperre: 5 statt 8.
• Blogübersicht 8 statt 7 und Archiv 2008 unverändert 9 Seiten, weil Karten nicht mehr zerschnitten werden.
• Druckblock rund 2,3 KB; die Stilvorlage wächst auf 38,2 KB, die Releaseprüfung erlaubt höchstens 40 KB.
• Geprüft: 8 Seitentypen, je hell und dunkel, also 16 PDFs pro Durchlauf.

Referenzen

• Brennen Puth: Websites Should Be Printable (24.10.2026)
• Hacker News: Websites Should Be Printable (Diskussion)
• Testfall im Blog: DNS-Sperre auf Abruf

Bemerkungen

• Puths eigene Lösung arbeitet mit Klassen im HTML (noPrint, onlyPrint). bk99.de kommt ohne neue Klassen aus, weil die vorhandenen Klassen der Seitenbausteine genügen; so musste keine der rund 1.900 Seiten neu hochgeladen werden, nur die Stilvorlage.

Brennen Puths Beitrag lesen →

Links zur Originalquelle und zum Webarchiv öffnen einen neuen Tab.