The Problem We've all been there. You build a beautiful layout in HTML/CSS, hit Ctrl + P, and suddenly everything breaks. Images are cut in half, margins are gone, and the background colors disappear.
I recently spent weeks building a resume builder, and I refused to use a canvas-based solution. I wanted pure, semantic HTML that prints perfectly to PDF.
The Challenge: CSS Print Media The biggest headache was handling page breaks dynamically. I had to go deep into CSS print rules like break-inside: avoid and @page margins.
Here is the snippet that finally fixed the "cutting text in half" issue for me:
CSS
/* The magic snippet */
.resume-section {
page-break-inside: avoid;
break-inside: avoid;
}
@media print { @page { margin: 0; size: auto; } }
**The Result**
After a lot of tweaking with puppeteer and CSS, I finally got it working reliably.
If you are struggling with generating PDFs from the web, or just want to see how these CSS rules behave in a real production app, I built a free tool called Resumemind to showcase it.
You can test the PDF generation here: https://resumemind.com
Let me know if you have any questions about the print CSS!
Top comments (1)
I'm hanging out in the comments for the next few hours! If anyone has specific questions about handling @media print or puppeteer rendering issues, feel free to ask. I learned a lot of edge cases (the hard way) while building this.