Using pagedown to convert from HTML to pdf in R

Question

Its my first time using pagedown.

Could you help me?

This is my .Rmd code:

---
title: "Table"
output:
  html_document:
    css: "test.css"
---

```{r}
library(knitr)
data(iris)
kable(iris)
```  

This is my .css file:

.main-container { 
     max-width: 1600px !important;
 } 
 tr:nth-child(even) {
     background-color: #f2f2f2;
 }
 th {
     background-color: #FF6319;
     color: white;
     font-size: 12px;
 }
 tbody {
     font-size: 12px;
 }
 hr {
     page-break-after: always;
 }

When i set the command pagedown::chrome_print('C:/Users/user/Downloads/myfile.html') the pdf output is created but it doesn mantain the css style.

What am I missing?

Any help?

Thanks!

Answer 1

This behavior comes from print media query: the rmarkdown::html_document() output format defines different CSS rules for print and screen. Secondly, the pagedown::chrome_print() function uses the print media styles to generate PDF.

The rmarkdown::html_document() output format relies on Bootstrap 3.3.5 which defines some specific rules for print media, see the source code.

More precisely, in the source code, there is this declaration:

@media print {
  .table td, .table th {
    background-color: #fff !important;
  }
}

These rules override the CSS rules defined in the question for print media.

In order to obtain the expected behavior, you have to override these built-in CSS rules using a higher specificity.

This modified stylesheet should do the trick:

.main-container { 
     max-width: 1600px !important;
 } 
 .table tbody tr:nth-child(even) {
     background-color: #f2f2f2 !important;
 }
 .table thead th {
     background-color: #FF6319 !important;
     color: white !important;
     font-size: 12px;
 }
 tbody {
     font-size: 12px;
 }
 hr {
     page-break-after: always;
 }