2

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!

RLesur
  • 5,810
  • 1
  • 18
  • 53
Laura
  • 675
  • 10
  • 32
  • You can try setting the format in chrome_print as pdf.... check https://rdrr.io/cran/pagedown/man/chrome_print.html Another option would be using rmarkdown? rmarkdown::pandoc_convert("C:/Users/user/Downloads/myfile.html", output = "test.pdf") – spYder Oct 05 '19 at 23:39
  • @spYder you mean `pagedown::chrome_print('C:/Users/user/Downloads/myfile.html', format="pdf)` ? I did and didnt work. – Laura Oct 05 '19 at 23:46
  • @spYder I also use `rmarkdown::pandoc_convert`and it didnt work – Laura Oct 05 '19 at 23:52

1 Answers1

4

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;
 }
RLesur
  • 5,810
  • 1
  • 18
  • 53