Graphics and colours not available for print

[royfrancis]

I noticed that if the html page with formattable is printed in chrome, the graphics and colours are not retained.

[marceluk]

I see the same problem in Firefox - is there a workaround for this issue?

marcel_uk

[mubashirqasim]

I am having the same issue as well. Please let me know when there is a workaround available...

[royfrancis]

After digging into this for a bit, I have come to realize that this is not much to do with formattable. This is a general html/css issue and it gets complicated.

When handling html pages with css styles, colours for screen are separated from colours for print. Colours for print are in a media tag.

For example;

/* heading 1 color for screen */
h1 {
   color: #fff;
   background: url(banner.jpg);
}

/* heading 1 color for print */
@media print {
   h1 {
      color: #000;
      background: none;
   }

This makes sense since you usually don't want to print all the background colours and graphics. There are some solutions to force colours in print. One way is to change the css tags inside @media to same as screen or whatever you want.

Another solution often suggested especially for chrome is to include the following css:

body {
  -webkit-print-color-adjust: exact;
}

to be added to the css style document or into the rmarkdown document directly.

I have not been able to get either of them to work correctly. This also depends on where (what source) your css styles are coming from. In my case, working in RStudio RMarkdown, I know that my css styles are coming from a bootstrap style. For example; Bootswatch Flatly. If you go into the css style and search for media, you will see something like this:

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    text-shadow: none !important;
  }

Notice the !important after the property style. This makes it harder to override that style with a css style defined in your rmarkdown document for example. And I think that might be the reason why the previously mentioned approaches did not work.

As I said before, it turned out to be more complicated than I thought. I reckon one potential solution would be to download the css style, modify the @media section and load it locally in rmarkdown through YAML as shown here. I haven't tried this out yet. If something works, please post here.