0

Using the Inspector of Google Chrome, I can easily check how a webpage (any public webpage, not the ones I control) will be rendered to be printed, doing this.

Also, I can change the appearance of some Css styles on the fly.

My question is: can I actually print that modified version of the webpage I am already browsing at this point? Not by default, I've already checked that, but maybe there is something I can do...

(Edit: I am specially interested in changing background colours)

thelawnmowerman
  • 11,956
  • 2
  • 23
  • 36
  • It seems that the modified styles are included into the print view, excluding the background and possibly others. – wrager Nov 12 '18 at 12:37
  • Thank you very much!, "excluding the background" was the lead I needed to finally get what I wanted! I post the complete answer. – thelawnmowerman Nov 12 '18 at 13:02

1 Answers1

0

I was just changing background colours, so I automatically thought that the print version was ignoring my 'on the fly' changes. The truth is that the print version in Chrome and Safari always ignores background colours, no matter if they are the original ones or a modified version.

The final solution is to edit the HTML on the fly, and adding -webkit-print-color-adjust: exact !important; to the elements you want to be printed with a background colour.

In my case, I add this to the <head> element:

<style>
.elements-i-want-to-change {
  background-color: [the colour];
  -webkit-print-color-adjust: exact;
}
</style>

Now, the printed version will contain my modified colours in the background :-D

thelawnmowerman
  • 11,956
  • 2
  • 23
  • 36