Hacker News Reader

Comment by barishnamazov | Hacker News Reader

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.

[0] https://barish.me/blog/make-your-website-printable-with-css/

View on HN

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.

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.

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.

Gutenberg[1] Print Styles has been my go-to for a very long time. If I remember correctly, the issues I faced was that I could not control pagination.

1. https://github.com/BafS/Gutenberg

Neat! I'll add it to my blog.

Neat, I did one of these too :)

https://voussoir.net/writing/css_for_printing

While on the subject, you can make a calendar in as little as 3 lines of CSS: https://calendartricks.com/a-calendar-in-three-lines-of-css/

That was a very nice read, thanks!

> 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.

Reply on news.ycombinator.com