🏠 back to Observable

legible notebook printing

Hi Observable folks,

When I try to print a notebook from Safari (I think because of the way Observable uses an iframe to hold notebook content?) the result is basically unusable. Whatever amount of the notebook content fits on each page will print, cutting off halfway down a line of text or KaTeX formula. The default print stylesheet picks a narrow notebook width, so text ends up enormous.

In Firefox it’s even worse: I only get whatever part of the content fits on page 1, followed by a mostly blank page 2 with nothing but the container page’s footer.

I am not at all an expert in browser printing, print CSS stylesheets, or the like, but if you ever get a chance some better default printing would be greatly appreciated!

6 Likes

As a back-up idea: if it turns out to be impossible to get the browser to produce good results by naïvely printing the page, maybe there could be some way to add a separate “turn the current page into a PDF” option somewhere built on http://pdfkit.org or something.

Thank you for this feedback! We will definitely look into this suggestion.

Hey @jrus, observable-prerender might be a solution for this. Under the hood, observable-prerender uses Puppeteer to render notebooks, and Puppeteer can save webpages as PDFs. When trying this out, I added a new .pdf() method and fixed a few bugs (so thanks for the idea!), so here’s how you can do it with one of your notebooks, as of v0.2.0:

const { load } = require("@alex.garcia/observable-prerender");

(async function () {
  const notebook = await load("@jrus/scpie");
  await notebook.pdf("notebook.pdf");
  await notebook.browser.close();
})();


You can see the ouput PDFs in this notebook!

However, it won’t be an exact match of what you see on observablehq.com. observable-prerender embeds the Observable Inspector stylesheet, but there’s more styling that exists on observablehq.com that doesn’t appear to be open-sourced. If you dig around in devtools network tab, you can find the custom stylesheets (which add things like fonts, styling, etc.), but it’s not easily available for non observablehq.com use.

One workaround is to copy-paste that custom stylesheets into the notebook itself. This won’t change anything for the observablehq.com notebook, but it will change the output of the observable-prerender notebook. I did this in this fork of your notebook.

Whipping out node and writing a custom script can be a hassle, though. There is a CSS @media print query that may be helpful, and you might be able to do some more magic with Puppeteer’s pdf() method to really carve out the PDF as you like.

4 Likes

@asg017 It looks like you forgot to share your draft https://observablehq.com/d/7994ba629f00dd3d

1 Like

Ah my bad, fixed