Fast print preview and webpaper

[castedo]

Description

This feature ticket describes two intertwined features of Baseprinter that could be copied by Quarto:

1. "webpaper": a large HTML element benefiting from print-responsive web design
2. "fast print preview": an HTML view that provides a fast medium-fidelity preview of what the webpaper will look like in PDF

The PDF is literally produced by running an HTML file, as previewed, as is, through WeasyPrint.

Baseprinter has many features, so appologies that the following example is demonstrating more than just this feature pair. You can pretend that "baseprint" means "blog post" and "baseprinting" means "blog posting". What a baseprint is not the point of this feature ticket. The point is the HTML output.

The example:

https://castedo.github.io/baseprint-example/

The default view is a fast print preview. It does not do real print page breaking. Except at the end, it roughly shows what the print page header and footer look like. Otherwise the print preview looks like what the PDF will look like give-or-take a pixel. The PDF icon at the top links to the PDF generated when this very HTML file is give to WeasyPrint. The webpaper view is using the same HTML, the only difference is a change is CSS classes by the button at the top. Make sure to adjust your browser window width to see how the webpaper reflows and a particular screen width corresponds exactly to the PDF.

My experience, is that with a medium-fidelity fast print preview, I don't really care that it take a few seconds to produce the PDF. I only generate the PDF occasionally as a sanity check. I don't need to constantly know where the real print page breaks are when authoring.

Quarto could output this type of HTML. The fast print preview will always be faster than Typst, because there is no additional separate stage. It's just the HTML, no extra step, just PRINT-REPONSIVE HTML that doesn't need to be transformed. It already looks like what it will look like when rendered into a PDF by WeasyPrint, because it's already print-responsive. A really fast way to transform HTML that doesn't print into a printable form is to not make the HTML UN-printable in the first place. 😉

It's OK that HTML OUTSIDE the webpaper is not print-reponsive if it get CSS-styled away for print. For instance, go ahead and use Bootstrap for HTML that is not printed. Just don't rely on it for HTML that should get printed.

Implementation details:

Template repository for the example HTML:
https://github.com/castedo/baseprint-example

GitHub Action that the example template calls:
https://github.com/castedo/baseprinter-action

The Baseprinter tool that is in the GitHub Action:
https://gitlab.com/perm.pub/baseprinter/
https://try.perm.pub/baseprinter/

The library that Baseprinter calls to generate print-responsive HTML:
https://gitlab.com/perm.pub/epijats

Reusable CSS that is kind of like Bootstrap, but is for print-responsive web design:
https://gitlab.com/perm.pub/epijats/-/blob/main/epijats/static/printstrap.css
https://printstrap.readthedocs.io

Reusable CSS that does responsive font-sizing so that webpaper flows and the print-PDF rendering corresponds to a corresponding screen size:
https://gitlab.com/perm.pub/epijats/-/blob/main/epijats/static/webpaper.css

Not-resusable CSS but it might have some styling worth copying for webpaper:
https://gitlab.com/perm.pub/epijats/-/blob/main/epijats/static/article.css

[castedo]

This feature is related to solving an issue like #9510.