legible print/PDF output for notebooks

[jrus]

Problem description: Long notebooks are sometimes nice to read on paper instead of on screen. This can be especially helpful when trying to proofread a long document, red felt pen in hand. Unfortunately, printing a document whose content is stuck into iframes does not work properly in shipping browsers.

Preferred ideal solution: it would be great if Observable could export to a nicely typeset PDF with appropriate line length, margins, maybe page numbers, image cells not cut off between pages, etc.

Workaround: Embed notebook cells on an external web page not in an iframe (for example http://visionscarto.net/obs/), and print from there. Browser print formatting is still pretty mediocre and image cells end up arbitrarily chopped in half and split between pages, so this is not really suitable for archival or public presentation, but it nominally works, in a pinch (e.g. for proofreading as the author, or reading a notebook on the beach).

Original discussion at talk/3971

[mootari]

Can you share a few problematic notebook URLs to test against?

[CobusT]

I would love a good test case. I think there are some low hanging fruit that can be fixed for better printing, but I am sure there will still be problem scenarios!

[dkirkby]

Another use case is preparing notes for a live demo or tutorial that you can cut & paste from.

[tophtucker]

@mootari has a great homegrown solution here: https://observablehq.com/@mootari/printable

[grant]

Are there more details to the issue with printing?

---

We can pretty easily remove the nav header with CSS when printing with some CSS:

@media print {
  ...
}

It looks fairly well right now.

[mootari]

@grant From the description:

nicely typeset PDF with appropriate line length, margins, maybe page numbers, image cells not cut off between pages, etc.

The example you shared is not suitable to test all these requirements, and even there you can see that lines wrap too early. We're also not aiming for "fairly". ;)

Furthermore UI elements (aside from the notebook header) need to be hidden.

[borango]

@mootari has a great homegrown solution here: https://observablehq.com/@mootari/printable

Works for me in some cases. It also respects "css page-break" rules, which don't work in a browser print from the notebook directly.

Thank you very much!