HTML/CSS to PDF: How I Solved the 'Page Break' Nightmare

Source: Dev.to

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 disappear, and background colors vanish.

I recently spent weeks building a resume builder and 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 dive deep into CSS print rules like break-inside: avoid and @page margins.

The Solution

/* 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:

Let me know if you have any questions about the print CSS!