Markdown vanuit een browser naar PDF exporteren

Er zijn twee manieren waarop een browser een PDF van een webpagina kan maken, en ze zijn niet even goed.

De eerste is de pagina als afbeelding renderen en die afbeelding in een PDF stoppen. Bibliotheken die dat doen zijn makkelijk in te bouwen, en het resultaat is een bestand waarin de tekst geen tekst meer is — je kunt hem niet selecteren, niet doorzoeken en er geen regel uit kopiëren, en het bestand is een paar keer groter dan nodig.

De tweede is de pagina afdrukken en “Opslaan als PDF” als bestemming kiezen. De browser maakt het document op voor papier, houdt zich aan de afdrukstijl en schrijft echte vectortekst. Het kost één klik extra en levert een werkelijk beter bestand op, dus dat is wat hier gebeurt als je op Opslaan als PDF drukt.

De vier instellingen die uitmaken

Alles hieronder staat in het afdrukvenster, niet op de pagina, omdat geen enkel stijlblad ze kan zetten.

Bestemming: Opslaan als PDF. Geen fysieke printer.

Achtergrondafbeeldingen: aan. Die staat onder Meer instellingen en is degene die mensen missen. Staat hij uit, dan gooit de browser elke achtergrondvulling weg — codeblokken verliezen hun tint, tabelkoppen worden wit, en een PDF met donker thema komt eruit als wit papier met witte tekst erop, wat lijkt op een mislukte export en niet op een instelling.

Kop- en voetteksten: uit. Die optie is de browser die op eigen initiatief de URL van de pagina en de datum toevoegt. Als je je eigen kop- of voettekst hebt ingesteld, botsen de twee. Zet die van de browser uit en houd de jouwe — of doe het omgekeerde als je paginanummers wilt, wat hieronder aan de orde komt.

Schaal: 100% of Standaard. “Aan pagina aanpassen” schaalt de letter om en gooit de marges in de war, en van de marges hangt de ruimte voor kop- en voettekst af.

Waarom de schaalregelaar soms verdwijnt

Als een document een vast papierformaat opgeeft, beschouwt Chrome het papier als al door de auteur bepaald en verbergt het de schaalregelaar volledig. Dat is geen fout in de browser of in de pagina — het is het gevolg van het feit dat het document zich vastlegt.

Papier is dus een keuze: A4, Letter of Standaard van de printer. De eerste twee vragen om een formaat en je verliest de schaal. De derde vraagt om niets en de schaal komt terug. De marges worden in alle drie de gevallen door het document gezet, dus een kop- of voettekst houdt zijn ruimte hoe dan ook.

Doorlopende kop- en voetteksten

Een doorlopende koptekst komt op elke pagina terug. In een browser gebeurt dat met een element met vaste positie, waarvan de specificatie zegt dat het op elk blad van een paginagericht medium terugkomt.

De finesse zit in het vrijhouden van ruimte. De voor de hand liggende aanpak — opvulling bovenaan de documentromp — houdt de ruimte één keer vrij, want de romp is één doos over hoeveel pagina’s hij ook wordt afgedrukt. Op pagina één werkt het, en vanaf pagina twee zit de koptekst boven op de tekst.

De oplossing is de ruimte vrij te houden in de @page-marge, die per pagina geldt, en de balk met een negatieve verschuiving in die marge te plaatsen. Dat is wat het stempelvak doet, en het verbreedt de marge alleen aan de rand die daadwerkelijk een balk draagt.

Elk van de vier velden — kop links, kop rechts, voet links, voet rechts — neemt willekeurige tekst aan, plus tekens die bij het afdrukken worden gevuld:

• {title} — de eerste kop of eerste regel van het document
• {date}, {time}, {datetime} — wanneer de PDF is gemaakt

Geen paginanummers, en waarom

Er is bewust geen {page}-teken. Pagina’s tellen binnen een doorlopend element kan een browser niet: counter(page) lost alleen op binnen de margevakken van @page, en geen enkele grote browser implementeert die. Een teken dat stilzwijgend niets afdrukte, zou slechter zijn dan geen teken.

Heb je paginanummers nodig, dan voegt de eigen kop-en-voettekstoptie van de browser ze toe. Gebruik die in plaats van een stempel, of neem beide en laat ze op tegenoverliggende randen staan.

Donkere PDF’s

De donkere optie draait de pagina om — zwart papier, witte inkt — en laat andere kleuren met rust. Eén bewuste uitzondering: de linkkleur wordt lichter gemaakt, omdat het blauw van het lichte thema tegen zwart op ongeveer 2,5:1 zit en onleesbaar is. Het houdt zijn tint en wint contrast.

Denk aan de achtergrondafbeeldingen. Een donkere PDF die zonder die optie is afgedrukt, is een lege witte pagina.