Styling CSS for printout

Styling (CSS)
1

Is there a way in PG to work at the stylesheet only for print devices (i.e. print A4) while having a preview?
Trying to print a two or more column layout often results in chaos :grin: This is bad for clients who tend to print everything …

Clean printouts would help me to realize a correction workflow with PDF for example when lots of text is involved. ((That works also with screenshots)).

So, has anyone an idea or a proven workflow for that to share with me?

Thanks!

2

Hi @aquorange,
There are a couple of ways that you could do this.

  1. The easiest way to do this is you only have a few styles to implement (but it makes Pinegrow look a little wonky), is to turn on print emulation. Just right-click on the Pinegrow logo in the upper-left corner of the app. Select inspect - this will open the Chrome DevTools. From the 3 horizontal dots select More Tools → Rendering. Then from the selections at the bottom of the DevTools window select “Print” from the “Emulate CSS media type” dropdown. Again, Pinegrow will look odd.
  2. Turn on the browser autosync. Using the Chrome browser (might also work with others) turn on the Print emulation from the DevTools. Add your @media print rules to the stylesheet. Your browser should automatically update.
  3. Add any print rules to the bottom of the stylesheet that loads last. Once finished, copy all of these rules to a new stylesheet that is loaded onto your page with a link that has an attribute of media="print".
    Hope this helps,
    Bob
3

Thanks for this, @RobM. I will try that the next days.

1 Like