4 ms·

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 w

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/ https://barish.me/blog/make-your-website-printable-with-css/

Brajeshwar 10mo ago
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 https://github.com/BafS/Gutenberg
- barishnamazov 10mo ago
  Neat! I'll add it to my blog.
sandreas 10mo ago
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.
- barishnamazov 10mo ago
  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.
- marczellm 10mo ago
  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.
- TeMPOraL 10mo ago
  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.
voussoir 10mo ago
Neat, I did one of these too :) https://voussoir.net/writing/css_for_printing https://voussoir.net/writing/css_for_printing
roosgit 10mo ago
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/ https://calendartricks.com/a-calendar-in-three-lines-of-css/
opello 10mo ago
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.

Brajeshwar 10mo ago

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 https://github.com/BafS/Gutenberg

barishnamazov 10mo ago
Neat! I'll add it to my blog.

sandreas 10mo ago

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.

barishnamazov 10mo ago
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.
marczellm 10mo ago
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.
TeMPOraL 10mo ago
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.

voussoir 10mo ago

Neat, I did one of these too :) https://voussoir.net/writing/css_for_printing https://voussoir.net/writing/css_for_printing

roosgit 10mo ago

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/ https://calendartricks.com/a-calendar-in-three-lines-of-css/

opello 10mo ago

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.