Markdown aus dem Browser als PDF exportieren

Es gibt zwei Wege, auf denen ein Browser aus einer Webseite ein PDF erzeugen kann, und sie sind nicht gleich gut.

Der erste ist, die Seite als Bild zu rendern und das Bild in ein PDF zu packen. Bibliotheken, die das tun, sind leicht einzubauen, und das Ergebnis ist eine Datei, in der der Text kein Text mehr ist — Sie können ihn weder markieren noch durchsuchen noch eine Zeile herauskopieren, und die Datei ist um ein Vielfaches größer als nötig.

Der zweite ist, die Seite zu drucken und „Als PDF speichern“ als Ziel zu wählen. Der Browser setzt das Dokument für Papier, beachtet das Druck-Stylesheet und schreibt echten Vektortext. Das kostet einen zusätzlichen Klick und liefert eine wirklich bessere Datei, also passiert hier genau das, wenn Sie Als PDF speichern drücken.

Die vier Einstellungen, auf die es ankommt

Alles Folgende steht im Druckdialog und nicht auf der Seite, weil kein Stylesheet es setzen kann.

Ziel: Als PDF speichern. Kein physischer Drucker.

Hintergrundgrafiken: an. Das steht unter Weitere Einstellungen und wird am häufigsten übersehen. Ist es aus, verwirft der Browser jede Hintergrundfüllung — Codeblöcke verlieren ihre Schattierung, Tabellenköpfe werden weiß, und ein dunkel gestaltetes PDF kommt als weißes Papier mit weißer Schrift heraus, was nach einem kaputten Export aussieht und nicht nach einer Einstellung.

Kopf- und Fußzeilen: aus. Diese Option ist der Browser, der von sich aus die Seiten-URL und das Datum hinzufügt. Wenn Sie eine eigene Kopf- oder Fußzeile gesetzt haben, kollidieren die beiden. Schalten Sie die des Browsers ab und behalten Sie Ihre — oder machen Sie es umgekehrt, wenn Sie Seitenzahlen wollen; dazu weiter unten mehr.

Skalierung: 100 % oder Standard. „An Seite anpassen“ skaliert die Schrift um und bringt die Ränder durcheinander, und von den Rändern hängt der Abstand für Kopf- und Fußzeile ab.

Warum der Skalierungsregler manchmal verschwindet

Wenn ein Dokument eine feste Papiergröße angibt, betrachtet Chrome das Papier als vom Autor bereits entschieden und blendet den Skalierungsregler ganz aus. Das ist kein Fehler im Browser oder auf der Seite — es ist die Folge davon, dass das Dokument sich festlegt.

Papier ist also eine Wahl: A4, Letter oder Druckerstandard. Die ersten beiden verlangen eine Größe, und Sie verlieren die Skalierung. Die dritte verlangt nichts, und die Skalierung kommt zurück. Die Ränder werden in allen drei Fällen vom Dokument gesetzt, eine Kopf- oder Fußzeile behält ihren Platz also so oder so.

Laufende Kopf- und Fußzeilen

Eine laufende Kopfzeile wiederholt sich auf jeder Seite. Im Browser wird das mit einem Element mit fester Position gemacht, das sich laut Spezifikation auf jedem Bogen eines seitenbasierten Mediums wiederholt.

Die Feinheit ist, Platz dafür freizuhalten. Der naheliegende Ansatz — Abstand oben am Dokumentkörper — hält den Platz einmal frei, denn der Körper ist eine einzige Box, über wie viele Seiten er auch gedruckt wird. Auf Seite eins funktioniert es, und ab Seite zwei sitzt die Kopfzeile auf dem Text.

Die Lösung ist, den Platz im @page-Rand freizuhalten, der pro Seite gilt, und die Leiste mit einem negativen Versatz in diesen Rand zu setzen. Genau das tut das Stempelvak, und es verbreitert den Rand nur an der Kante, die tatsächlich eine Leiste trägt.

Jedes der vier Felder — Kopf links, Kopf rechts, Fuß links, Fuß rechts — nimmt beliebigen Text auf, dazu Platzhalter, die beim Drucken gefüllt werden:

• {title} — die erste Überschrift oder erste Zeile des Dokuments
• {date}, {time}, {datetime} — wann das PDF erstellt wurde

Keine Seitenzahlen, und warum

Es gibt bewusst keinen {page}-Platzhalter. Seiten innerhalb eines laufenden Elements zu zählen, kann ein Browser nicht: counter(page) löst sich nur innerhalb von @page-Randboxen auf, und kein großer Browser implementiert diese. Ein Platzhalter, der stillschweigend nichts druckt, wäre schlimmer als gar kein Platzhalter.

Wenn Sie Seitenzahlen brauchen, fügt die browsereigene Kopf- und Fußzeilenoption sie hinzu. Nehmen Sie die statt eines Stempels, oder akzeptieren Sie beides und lassen Sie sie an gegenüberliegenden Kanten sitzen.

Dunkle PDFs

Die dunkle Option kehrt die Seite um — schwarzes Papier, weiße Tinte — und lässt andere Farben in Ruhe. Eine bewusste Ausnahme: die Linkfarbe wird aufgehellt, denn das Blau des hellen Themas liegt gegen Schwarz bei etwa 2,5:1 und ist unlesbar. Es behält seinen Farbton und gewinnt Kontrast.

Denken Sie an die Hintergrundgrafiken. Ein dunkles PDF, ohne sie gedruckt, ist eine leere weiße Seite.