CSS rules for printing is one of my favorite features of the web. You get a powerful typesetter directly in your browser. For those wondering how it's done, I wrote about it [0] recently for my friends who frequently asked how I generated PDFs for my blogs.
Thank you for the nice (and still short) article - I really liked it.
However, while these rules apply for web pages, I would like to... let's say warn all developers expecting CSS is a good option for accurate printing.
It may work for single page printouts or "make this page more printable" approaches, but don't expect it to be an easy opt out of providing PDFs for every single use case.
CSS for printing gets annoying pretty quick as soon as you have some more sophisticated requirements. You should probably also know that print-CSS is not fully cross browser compatible - there are quirks and caveats for every single one of them regarding font sizing, margin, padding and page-layouts.
I would not recommend to use HTML + CSS for something that really needs to be exactly the same layout in every browser.
Thanks for the feedback! Agreed, I too have experienced those quirks. This applies to most modern CSS features in general :-)
FWIW, I also have had also success with running a server-side headless chromium instance on an app where I was generating nicely formatted exam from provided questions.
OTOH, it's good enough that a webapp I vibe-coded in 5 minutes on the phone is better at typesetting and aligning label stickers than Microsoft Word. Or at least easier and gives correct results on the first try, vs. Word that gives me correct results approximately never; I've wasted close to person-day fighting with it over the year already.
Yeah we wanted something that would print with exact physical sizes and there's no reliable support for that so we ended up generating PDF with PDFium in WebAssembly.
> I also removed the background color so we save ink on actual printing.
It seems reasonable to also remove the #post-title border-top:1rem solid var(--accent-dark) for the same reason? That and the padding-top on the same element struck me as unnecessarily moving the printed content down the page.
[0] https://barish.me/blog/make-your-website-printable-with-css/