Essay layout to PDF

[drbobbyduke]

When I export my project to a PDF, the essay layout has a wide top margin on each page. How do I use the whole page on the PDF? It appears fine in the "quire preview".

[1000camels]

I've been doing a lot of work with our PDFs, and it is rather complicated to debug. Firstly, make sure you use print emulation (Chrome: https://developer.chrome.com/docs/devtools/rendering/emulate-css). Secondly, when using quire preview, unless you delete the public folder, you will not have the latest. And when using quire build, be sure to use quire clean first.

Finally, there are some basic settings in variables.scss to set the margins, but be aware that how they are applied depends of the page property and the @page settings. By default left and right pages have opposite inner/outer margins.

// Print/PDF stylesheet
// -----------------------------------------------------------------------------
$print-width: 8.5in;
$print-height: 11in;
$print-bleed: .125in;
$print-crop-marks: false; // true | false

$print-bottom-margin: 0.875in;
$print-top-margin: 0.75in;
$print-outer-margin: 0.75in;
$print-inner-margin: 0.75in; /* 1in; */

$print-base-font-size: 8.5pt;
$print-text-color: $black;

$print-splash-color: $white;

$print-entry-image-color: $off-white; //$black; // or can use $rich-black with PrinceXML
$print-entry-caption-color: $white;
$print-entry-image-display: all; // first | all

Finally, I found that my header had a setting that made sense on the screen but was too large in print and was covering content. That may be happening to you.

[cbutcosk]

I've been cleaning up some of the PDF internals for the last lil bit and can confirm @1000camels 's styling approach above and that it's the most future-proofed (though indeed twitchy as it sets all margins globally for pages).

If you're looking to fix just the first page of essays (which in the stylesheet are .quire-page) and are comfortable getting knee-deep in SCSS, the header margin for hero images is set here: https://github.com/thegetty/quire-starter-default/blob/eaa2a9c07c43c874ab18c0641ad6253f57641278/content/_assets/styles/print.scss#L390 .

Other details you may or may not need as you hack away @1000camels and @drbobbyduke , the PDF generator picks up every <section> element from your rendered template and inserts it into an HTML document destined for PDF printing, writes that to _site/pdf.html (this is why you often have to quire clean to see fixes), and then on running quire pdf renders that in an captive browser via Chromium for --lib pagedjs or a custom engine in PrinceXML for --lib prince.

For pagedjs it can be very useful to run quire pdf --debug when something goes wrong or use the printer directly via pagedjs-cli / npx pagedjs-cli / etc. Pointing that npx piece out only because it’s a CLI dependency, not the quire project itself so it is installed wherever you have your CLI (global, in-project, etc). See pagedjs-cli --help for complete options. This gives you a much clearer picture on page breaks, section breaks, splash page style behaviors, etc.

Anyway, apologies for dumping this in this unsuspecting thread, but hopefully it's of some use to you both!

[1000camels]

Thanks for the pointer on using pagedjs-cli.
I couldn't quite figure out what the analogous pagedjs-cli command would be. I do see how it opens Chromium, but how do you see the page breaks.
I have had real issues with some content being cutoff, especially on entry pages.

[cbutcosk]

Hmm yeah I would not be shocked to find break behavior bugs in quire's PDF stylesheet and / or versions of this bug: https://gitlab.coko.foundation/pagedjs/pagedjs-cli/-/issues/75

By any chance @1000camels do you have a test case for entries being cut off in the PDF page breaks or have a sense of what would trigger it when you saw it?

[1000camels]

I will try to produce an example.