cssrpdfr-markdownpagedown

Why is pagedown::chrome_print() converting a solid color html element to a gradient?

I am using the datadrivencv R package to generate a resume. Rendering the default resume in html works fine, but when I use the provided code (see below) to print to pdf, the sidebar goes from a solid color to a gradient. This is easier to see if you adjust --sidebar-background-color: in the dd_cv.css file to something darker like --sidebar-background-color: #727273;. Is there a way to prevent this?

datadrivencv::use_datadriven_cv(
  full_name = "Nick Strayer",
  data_location = "https://docs.google.com/spreadsheets/d/14MQICF2F8-vf8CKPF1m4lyGKO6_thG-4aSwat1e2TWc",
  pdf_location = "https://github.com/nstrayer/cv/raw/master/strayer_cv.pdf",
  html_location = "nickstrayer.me/cv/",
  source_location = "https://github.com/nstrayer/cv"
)
datadrivencv::use_csv_data_storage()

To render the cv, you will have to go into the cv.rmd file and on line 25 change data_location to data_location = data/. Then run

# This script builds both the HTML and PDF versions of your CV

# If you wanted to speed up rendering for googlesheets driven CVs you could use
# this script to cache a version of the CV_Printer class with data already
# loaded and load the cached version in the .Rmd instead of re-fetching it twice
# for the HTML and PDF rendering. This exercise is left to the reader.

# Knit the HTML version
rmarkdown::render("cv.rmd",
                  params = list(pdf_mode = FALSE),
                  output_file = "cv.html")

# Knit the PDF version to temporary html location
tmp_html_cv_loc <- fs::file_temp(ext = ".html")
rmarkdown::render("cv.rmd",
                  params = list(pdf_mode = TRUE),
                  output_file = tmp_html_cv_loc)

# Convert to PDF using Pagedown
pagedown::chrome_print(input = tmp_html_cv_loc,
                       output = "cv.pdf")

Html screenshot: enter image description here

Pdf screenshot: enter image description here

Solution

  • I was able reproduce the issue only on github document preview: https://github.com/OnkarRuikar/catblock/blob/master/test/cv.pdf
    Gradiant on side bar


    But if I open the same pdf in other viewer like google docs cv, it renders fine. Let me know which PDF viewer are you using that renders the gradient?

    To fix this put following CSS rule in dd_cv.css:

    @page {
    background: 0% 0% / 100% 0.1% linear-gradient(to left, var(--sidebar-background-color) var(--sidebar-background-width), white var(--sidebar-background-width));
}

    This is the fixed PDF https://github.com/OnkarRuikar/catblock/blob/master/test/cv_fixed.pdf

    You'll notice that language skill bars are still showing gradients. For that you need to edit cv_printing_functions.R file and modify function print_skill_bars with similar gradient syntax. OR in cv.rmd file provide your own glue_templet argument to the method call CV %>% print_skill_bars(...)

    I created the pdfs on following package versions:

    # run following commands to get versions of installed packages required by the `datadrivencv`

 pkg = tibble::tibble(
   Package = names(installed.packages()[,3]),
   Version = unname(installed.packages()[,3])
 )
 dplyr::filter(pkg, Package %in% c("dplyr", "tidyr", "glue", "readr", "googlesheets4", "lubridate", " purrr", "stringr", "magrittr", "pagedown", "fs", "icon", "whisker", "knitr", "rmarkdown" ,"testthat"))

Following are the versions installed on my machine at the moment:
# A tibble: 15 x 2
   Package       Version
   <chr>         <chr>  
 1 dplyr         1.0.7  
 2 fs            1.5.0  
 3 glue          1.4.2  
 4 googlesheets4 1.0.0  
 5 icon          0.1.0  
 6 knitr         1.36   
 7 lubridate     1.8.0  
 8 magrittr      2.0.1  
 9 pagedown      0.15   
10 readr         2.1.0  
11 rmarkdown     2.11   
12 stringr       1.4.0  
13 testthat      3.1.0  
14 tidyr         1.1.4  
15 whisker       0.4