Incompatible with PDF exporting

[jessejoe]

Summary

There are 2 issues with PDF export:

1. The theme itself is currently incompatible with resume-cli PDF export - which looks to be because of changes in v0.14.0 which changed the package layout and removed index.js
2. Using an alternative like Puppeteer and/or even a full browser like Chrome/Firefox, the elements have large gaps or are cut-off between pages

1. resume-cli incompatibility

Current version is incompatible with resume-cli PDF export:

$ npm ls
json-resume@ /Users/jesse/src/json-resume
├── [email protected]
└── [email protected]

$ npx resume export --theme jsonresume-theme-even resume.pdf
You have to install this theme relative to the folder to use it e.g. `npm install /Users/jesse/src/json-resume/node_modules/jsonresume-theme-even/index.js`

The code for resume-cli seems to be looking for index.js, which no longer exists.

Downgrading to v0.13.0 (which still contained index.js) works:

$ npm ls
json-resume@ /Users/jesse/src/json-resume
├── [email protected]
└── [email protected]

$ npx resume export --theme jsonresume-theme-even resume.pdf

Done! Find your new .pdf resume at:
 /Users/jesse/src/json-resume/resume.pdf

I believe the changes to use microbundle in v0.14.0 may have broken this.

2. CSS elements cut off or huge gaps

When printing the exported resume HTML using Chrome, elements can be split over page breaks:

In Firefox, it seems to want to keep entire sections together, so leaves huge breaks between:

I assume this needs some changes to to print media CSS, however that's not my expertise.

[rbardini]

Hi @jessejoe!

Thanks for the detailed issue. The adoption of Microbundle must have indeed broken compatibility with resume-cli. The .cjs extension is a requirement to support multiple output formats while using ESM by default. I'd say resume-cli shouldn't rely on a specific filename to import themes, as the entry point to a npm package can be arbitrarily named. I'll see what I can do, but this probably has to be fixed in the CLI itself.

By the way, I'd highly recommend giving Resumed a try, as it's a more modern alternative to resume-cli with better theme handling, albeit with fewer features, like no PDF exporting—which I don't think should be the tool's responsibility anyway. You can also directly use the theme to generate your HTML resume.

As for the printing gaps and breaks, it's extremely difficult to ensure a continuous page is perfectly converted into discrete ones, considering all the different page sizes, margins, renderers (e.g. Chrome vs Firefox), as well as the content itself. Fixing one issue (e.g. adding page breaks to avoid cut-off text) unfortunately leads to another (huge gaps between sections). What I usually do is manually fiddle with print settings (margins, scale, etc) until the result looks good 🤷‍♂️

[jessejoe]

Thanks @rbardini! Yep, been using resumed, was only using resume-cli for the PDF export.

Yeah, I know CSS is a PITA. One thing to mention is I don't see the issue with the flat theme this is based on.

[rbardini]

I think that's because browsers have some trouble printing CSS grid–based layouts. You could try v0.3.2 and see how it goes? Won't look as pretty but might behave better as a PDF 🙂

[rbardini]

@jessejoe I just added some examples to the Resumed repository, including one with PDF exporting. You can play with Puppeteer's options and see if it gives a better result.

[jessejoe]

Hey @rbardini, sorry for the delay. Thanks for creating those! Unfortunately, I don't personally see any improvement over using browsers to export (not sure if it was intended?). I also notice some of the rendering that is visible in the PDF is missing when you print the PDF, so I wouldn't really use it, though I guess it is nice to have an option for PDF export with puppeteer inside the repo.

Example export:

[rbardini]

Sadly, printing with a browser or Puppeteer will bring similar results, as this is a CSS grid rendering issue. I guess the only workaround is to use an older theme version that doesn't use grid layout (v0.3.2 or below). I may have to revert back to flow layout because of this, which is a shame 😢

The examples are mostly to help resume-cli users migrate to Resumed, which should have fewer theme compatibility issues.

[jessejoe]

Makes sense. The only reason I use JSON resume in the first place is so I can export in HTML and PDF. If PDF doesn't work, then it defeats the usefulness of the whole thing IMO.