Paged print media simulation

Developer Tools
#1

Hi!
I am working on improving print support for pages on my website. This is hard because I don’t find a way to preview how the pages will actually be printed.

The developer tools have a button to simulate the printer:
image

It enables @media print CSS rules, but does not actually display how the content will be paginated.

Is there a setting in the developer tools to see how the content will be layed across paper pages?

The closest I found was to actually try to print the page: Firefox opens a menu with the paged content. The problem with this is that it cumbersome to work with: every time you refresh the page, the menu closes. Also it’s a small floating modal, a preview using the whole tab would be more ergonomic.

Does a solution already exist? Are there better ways to debug how the content will be printed?

#2

I think your workaround of calling up the print preview overlay is the only way, and of course, it is for your paper size and margins, and isn’t guaranteed to be the same for other users.

You can enlarge the overlay using some CSS in a userChrome.css file. I have some in my “sample rules” here: https://www.userchrome.org/download-userchrome-css.html

Are there particular problems you want to avoid when printing?

#3

I was hoping for a menu where I could enter my page setup and view the rendered version, while still having access to the inspector tools. This is another limitation of the print-preview: it is not possible to use the inspector to edit the CSS on the fly.

My primary goals is to check that page-breaks do not break content or that more complex layouts are properly rendered (for example to keep some items aligned to the left and right of the page, without one going below the other).

In a second time, I wanted to further enhance printed content using @page and other print-specific CSS rules.

#4

Or to put that another way, Firefox doesn’t monitor for changes made in the DevTools while the print overlay is open, so those changes are not reflected in the preview until you close it and call it up again.

It would be cool to have a choice of live print preview and monitors for changes to the page and always shows the latest version. But maybe not as the default behavior.

Do other browsers show page breaks when you switch on print emulation?

The only one I code for specifically myself is keeping paragraphs that describe a following image together with that image:

<div style="page-break-inside: avoid;">
<p>This screenshot illustrates the difference in heights:</p>
<p><img src="img/Fx90-about-config-browser-uidensity.png"></p>
</div>

A significant problem with some display styles (like flex and inline-block) and there are numerous unexpected situations (bugs). But do you need to live edit these with the preview open? They seem to be major decisions.

#5

I started working on printing for my website yesterday and had some good progress, so it’s definitely possible to work on this as it currently stands. But I was hoping for some improvements.

My current setup is to use Firefox and the inspector for most details, and have a script watching for changes and refreshing a PDF using Chrome’s command-line to check actual results (I don’t think Firefox can print to PDF from the command line).

#6

For reference, there’s a feature request to add such a feature in bug 1560714 .

Sebastian

#7

Thank you,
I haven’t found this issue while searching but it corresponds to what I wanted.