Improved printing to PDF

[freeman-lab]

Tracking improvements in generating PDFs from our Articles here on the Research page. Some of these things will be specific to Articles, whereas others will likely generalize to other use cases (like the Blog). Some specific things listed below, possibly worth creating separate issues for depending on their complexity. I think most of this can be done by tweaking our print-specific styles and then relying on Print -> Save as PDF, rather than engineering some brand new PDF solution.

• Removing the back button (while the link works the word "Back" makes no sense on a printed version)
• Remove header dimmer icon and menu (not useful in a printed version)
• Consider either inlining expanded references or putting a list of references at the end
• Prevent lines from being split / clipped on page breaks (should be easier!)
• Prevent figures from being split / clipped on page breaks (important and might be hard!)
• Consider removing / simplifying the end matter and footer (though it might be fine and useful to keep)
• Using more file-system friendly naming conventions (I prefer capitalization with hyphens)

A current PDF is enclosed here for reference.
CarbonPlan-2021-Forest-Risks-Explainer.pdf

cc @katamartin

[freeman-lab]

I started making some of these improvements while working on the new layouts package. Samples below.

In general, for any element we want to hide on print, it's as simple as adding this to the sx prop:

'@media print': {
  display: 'none',
}

That made it easy to hide the back button and some of the end bits. Because we wanted to hide items defined in the base layout, I also had to make a hopefully peaceful change in components, which was to add a printable boolean (default false). When true, it just hides the header and the footer.

I also learned that, for tables and figures, we can add this style to them:

'@media print': {
  pageBreakBefore: 'always'
}

This generally prevents figures from getting split, but, it can create some obnoxiously large white space. Probably worth doing, as any more complex solution would (probably?) involve a more sophisticated layout engine.

If we want to do this, we should probably do it on the Table element, and similarly define a Figure component, so we don't need to go define it on every figure in every article.

print-sample-page-breaks.pdf
print-sample.pdf

[katamartin]

Prevent figures from being split / clipped on page breaks (important and might be hard!)

I think we can mark this one off after #227. There are still cases where some long figures may get broken up. Like we discussed, we can always put a max-height on those using a media query, but that will remain a manual process.

[katamartin]

It looks like we also may need to make some changes to specifically target Firefox, where the header and charts each have issues.

Firefox.pdf

[freeman-lab]

New issue that popped up... for charts specifically, with current settings, the top-most tick label can potentially get cut off and appear on the previous page. A simple solution that worked in at least one example was to simply add some padding above the figure. We could build a print-specific padding into the Figure component, though we should be careful to balance making it enough to avoid this issue without creating a visible gap for all figures. Or, make it optional?