Pagedown: re-arranging order of categories in pagedown::business_card

[mariakharitonova]

Hi, one other question about business_card, is it possible to re-arrange the order of categories (name, email, phone, etc.) and to insert blank lines between them?

The default appears to be:
Name
Title
Blank line
Phone
Email
URL

I'd like for the categories to be arranged differently and to insert more blank lines. How do I do so? Thank you so much for your guidance!

[RLesur]

Hi,

In order to re-arrange the order of categories, you will have to modify the Pandoc template of pagedown::business_card(). This wasn't possible until I pushed https://github.com/rstudio/pagedown/commit/2398247869084ff9ab90e1f2ca8c377801da891b some minutes ago.

First of all, please, install the development version of pagedown with:

remotes::install_github("rstudio/pagedown")

Do not forget to restart your R session after this.

Make a copy of the built-in template:

file.copy(pagedown:::pkg_resource("html", "card.html"), "customcard.html")

This command creates a copy named customcard.html. Open this file to modify it.

In order to modify the order of appearance of the informations, we will have to modify these lines:
https://github.com/rstudio/pagedown/blob/2398247869084ff9ab90e1f2ca8c377801da891b/inst/resources/html/card.html#L54-L63

Let assume that we want to obtain the title on the first line followed by the name on the second line.
We will modify the customcard.html template as follow:

  <div class="me">
    <div class="title"><slot name="title"><span>$title$</span></slot></div>
    <div class="name"><slot name="name"><span>$name$</span></slot></div>
    <div class="coordinates">
      <p class="phone"><slot name="phone"><span>$phone$</span></slot></p>
      <p class="contact-email"><slot name="email"><span>$email$</span></slot></p>
      <p class="website"><slot name="url"><span>$url$</span></slot></p>
      <slot name="address"><div class="address">$address$</div></slot>
    </div>
  </div>

This is all you need to modify the order of appearance of the informations.
In order to test your custom cards template, you have to tell to R Markdown that you want to use customcard.html as a template.

In order to do so, you have to modify this line in your Rmd file:
https://github.com/rstudio/pagedown/blob/2398247869084ff9ab90e1f2ca8c377801da891b/inst/rmarkdown/templates/business-card/skeleton/skeleton.Rmd#L22

Write:

output: 
  business_card:
    template: customcard.html

Be aware that the customcard.html file has to be in the same folder as your Rmd file.

Now, let's talk about the _blank lines_. Technically speaking, this vertical space is a margin, not a blank line. For instance, the space before the phone is defined by this CSS rule:
https://github.com/rstudio/pagedown/blob/2398247869084ff9ab90e1f2ca8c377801da891b/inst/resources/html/card.html#L83

We also can use CSS to modify the appearance of the cards. If we want to remove the vertical space before the phone, we can use this Rmd file:

---
logo: "https://upload.wikimedia.org/wikipedia/commons/5/5a/Star_Wars_Logo..png"
googlefonts: "Righteous"
paperwidth: 8.5in
paperheight: 11in
cols: 4
rows: 3
output: 
  pagedown::business_card:
    template: customcard.html
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

```{r r-base}
# R base
person <- apply(dplyr::starwars, 1, function(x) {
  list(
    name = x$name,
    title = x$species,
    address = x$homeworld
  )
})
```

---
```{r write-yaml, results='asis'}
cat(yaml::as.yaml(list(person = person)))
```
---

```{css}
.coordinates {
  margin-top: 0;
}
```

As you can see, the last lines of the Rmd files are a CSS code chunk. In this chunk we indicate that for the coordinates block, we want a 0 top margin.

If we want to add a margin before the email, we have to use the contact-email class defined here:
https://github.com/rstudio/pagedown/blob/2398247869084ff9ab90e1f2ca8c377801da891b/inst/resources/html/card.html#L59
like this:

.contact-email {
  margin-top: 0.5cm;
}

References:

• on Pandoc templates, https://bookdown.org/yihui/rmarkdown/template-pandoc.html
• on CSS, https://bookdown.org/yihui/blogdown/css.html

[mariakharitonova]

Wow, this is incredible. You are so helpful! All of this makes a lot of sense and I will try it out now. Thank you!!!

[mariakharitonova]

It all worked like a dream -- thank you SO much!

[mariakharitonova]

One final (I hope!) question: is there any way to knit this right to PDF? Now I do it manually from the browser window, but wondering if there's an option to automatize. (To explain context: I am using this package to create login cards for an online assessment, so will be generating them with some periodicity).

[cderv]

Hi @mariakharitonova,

did you already try the chrome_print() function inside pagedown ?
https://pagedown.rbind.io/#print-to-pdf

This is the automated way to print a webpage to pdf. You can provide a Rmd as input, it will render to html then print without you having to open the browser.

[mariakharitonova]

It worked, thank you! But it raised another issue, which I'll open another request for, since it's seems like a separate topic. Thank you again!