PDF export has bad page breaks

[dcantatore]

When exporting the resume to a pdf doesn't care about the content and just make a new page directly through the middle of content.

Am I correct in saying it is basically just screenshot'ing the html output and cutting it into "pages" for the pdf?

[rbardini]

resume-cli uses Puppeteer to generate PDFs:

https://github.com/jsonresume/resume-cli/blob/62cf81174d9a11cf5382e9f75023fa1216c98fc8/lib/export-resume/index.js#L79-L113

I've also noticed cut-off text in the output, but not sure how it can be fixed. Maybe we can configure Puppeteer somehow to avoid that.

[dcantatore]

Yes, so it just calls puppeteers pdf method.

A way to work around this would be to check the DOM for things near the Y coordinate of the page breaks and modify with a div spacer or something along those lines. It's not that simple as lists etc. can't just be split. You would have to find sections and move them above or below the break.

Although the way I work around it locally is just print to pdf and it saves with logical page breaks. I'm not sure what the difference in puppeteer working headless vs a regular browser that would cause it to cut things so poorly.

[rbardini]

Since Chrome already handle page breaks without cutting off text, I would expect Puppeteer to do the same here, but it doesn't 😕

I hope there's a way to fix this without having to dynamically add page breaks to the DOM, as that would be pretty complex

[NewDark90]

Have you tried changing the css with page break rules? That'd be the way to go if you haven't tried yet https://css-tricks.com/almanac/properties/p/page-break/

[rbardini]

The problem is where to add these page breaks. If we add them before each section, for example, we may end up with mostly empty pages, and injecting them dynamically is really tricky.

The best scenario would be for Puppeteer (or an alternative method) to print the page in a similar way as browsers usually do, respecting the layout flow.

[thomasdavis]

Just doing some issue cleanup, I believe the answer to getting all themes printing pretty to pdf is by inventing a convention/lib that every theme can leverage. Will think about it some more.

[idenc]

Would it be possible to export the entire resume as a single page?

[rjnienaber]

For anyone else having an issue with this, I solved it by doing the following:

resume.json

{
  "work": [{
     "breakBefore": true
   ....
   }]
}

main.scss

.page-break {
  margin-top: 15px;
  page-break-before: always;
}

work.hbs

  {{#each resume.work}}
  {{#if breakBefore}}
  <section class="item page-break">
  {{else}}
  <section class="item">
  {{/if}}

[a-r-db]

I ended up using google chrome and opening my html directly then printing to pdf.

[schnerring]

Is the issue related to Puppeteer PDF conversion not supporting flexbox and grid? I also had a look at the CSS spec.

It's just an idea, I haven't verified it. Gotta do some digging... I couldn't find any open issues on the GitHub Puppeteer repo.

[thomasdavis]

Turning any HTML into a PDF is always a sub-optimal experience.

This thread can stay open as a tips and tricks dump for ideas.

[a-r-db]

@thomasdavis thanks, I agree, but I had to produce over 50 Resumes, for about 3-5 different types of jobs I was applying to and 99% of theme were PDF format. Maybe it's a rare use case, but I did figure out a way to do it.

[SethFalco]

I think this is a bit out of scope for resume-cli to be honest. Themes should be using CSS properties like break-inside to control it, to break content appropriately.

https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside

One thing we could evaluate here though is if we can expose page/edge margins to the user, and configure a more sensible default.

[AlecRust]

Just to throw in my solution, as some other have done I replaced resume export cv.pdf command with manual Puppeteer using latest headless mode which works great: https://github.com/AlecRust/cv/commit/89187817378af7e87f996ae5e2f0e049206f4665