No Designer Needed: How to Create Beautiful Reports Using Only R

---

background-image:url("img/page.jpg")

# `pagedown`

---

## The Problem

We often need to create PDF reports from RMarkdown

PDFs are portable

PDFs are widely used

---

## Potential Solution #1

Work with a graphic designer

---

![](img/ivac-sample.png)

---

## Potential Solution #2

R users usually think of LaTex to make PDFs from RMarkdown, but there are some problems:

---

### The Default Output Looks Awful

---

### LaTeX is Terrible

---

<blockquote class="twitter-tweet" align="center" data-width="550" data-lang="en" data-dnt="true" data-theme="light">why is LaTeX— 🍁🍂 🐘 @andrew@fediscience.org 🐘 🍂🍁 (PARODY?) (@andrewheiss) <a href="https://twitter.com/andrewheiss/status/1268989566243004417?ref_src=twsrc%5Etfw">June 5, 2020</a></blockquote>

---

<blockquote class="twitter-tweet" align="center" data-width="550" data-lang="en" data-dnt="true" data-theme="light">making tables in LaTeX is enough to make me take back every bad thing I ever said about Microsoft Office— Matt Cowgill (@MattCowgill) <a href="https://twitter.com/MattCowgill/status/1249190934392307712?ref_src=twsrc%5Etfw">April 12, 2020</a></blockquote>

---

<blockquote class="twitter-tweet" align="center" data-width="500" data-lang="en" data-dnt="true" data-theme="light">So nice to see this in print at last <a href="https://t.co/9wVjm3CtvE">pic.twitter.com/9wVjm3CtvE</a>— thattommyhall (@thattommyhall) <a href="https://twitter.com/thattommyhall/status/1248679614337241089?ref_src=twsrc%5Etfw">April 10, 2020</a></blockquote>

---

# The Solution: `pagedown`

---

## Why `pagedown`?

You can use tools like HTML and CSS to format your documents:

+ Way easier than LaTeX to learn

+ Easier to reuse parts on a website or in other formats (like `xaringan` or `blogdown`)

+ Outputs generally looks nicer than LaTeX

---

---

---

---

## How `pagedown` Works

**`pagedown`** is an R package that provides custom output formats:

+ you call it through `pagedown::html_paged` in the YAML header

+ and use the `css` argument to provide a custom style sheet

```yaml
---
title: "My title"
date: "May 2022"
*output:
* pagedown::html_paged:
*   css: "style.css"
*knit: pagedown::chrome_print
---
```

---

## Behind the Scenes

1. `pagedown` + `rmarkdown` translate the document into an **HTML** file (using Pandoc)

2. `pagedown` calls Paged.js, which puts things into the right place to look like "pages"

3. The `pagedown::chrome_print` function converts the HTML document to PDF

---

# HTML and CSS

---

## HTML and CSS

- HTML creates the bricks of your document

+ Large brick (h1, h2, h3, etc)

+ Regular text brick (p)

- CSS is what the bricks look like

+ size

+ color

+ shape

---

---

## HTML in `pagedown`

`pagedown` uses the Paged.js library, which gives us some specific ways to format our document you won't see anywhere else in the world of HTML

---

---

# Let's Make a `pagedown` Report!

---

## Install `pagedown`

```r
install.packages("pagedown")
```

---

## Create a Document

![](img/pagedown-from-template.png)

---

# Page Size

---

## Page Size

To handle pages, `pagedown` has a special CSS element called `@page`:

+ you can (and must) set its size at the beginning

```css
@page {
  size: 8.5in 11in;
}
```

---

# Margins

---

## Margins

```css
:root {
  --pagedjs-margin-left: 0.75in;
  --pagedjs-margin-right: 0.75in;
  --pagedjs-margin-bottom: 1.25in;
  --pagedjs-margin-top: 1in;
}
```

---

# Fonts

---

## Fonts

```css
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
```

---

## Fonts

```css
body {
  font-family: Inter, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

p {
  font-size: 12pt;
}
```

---

## Fonts

```css
blockquote {
  margin-inline-start: 0;
  color: #6cabdd;
  padding-left: 10pt;
  border-left: 2pt solid #6cabdd;
  font-style: italic;
}
```

---

# Footer

---

---

## Footer

```css
@page {
  size: 8.5in 11in;

@bottom-left-corner {
    content: "";
    background-image: url(rru-logo-blue.svg);
    background-repeat: no-repeat;
    background-size: 0.5in;
    background-position: center;
  }

@bottom-right-corner {
    content: counter(page);
    color: grey;
    font-size: 10pt;
  }

}
```

---

# Cover Page

---

## Cover Page

```css
@page:first{
  background: linear-gradient(130deg, black, transparent),
    url(dark-hex-pattern.svg);
  background-repeat: no-repeat;
  background-size: cover;

@bottom-left-corner {
    background: none;
  }

@bottom-right-corner {
    content: none;
  }
};
```

---

## Cover Page

```css
h1.title {
  color: white;
  font-size: 36pt;
}

h2.date {
  color: white;
  font-weight: normal;
  font-size: 18pt;
  page-break-after: always;
}
```

---

# Multicolumn Layouts

---

---

## Multicolumn Layouts

---

## Multicolumn Layouts

```css
img {
  max-width: 100%;
}

.wrap-columns {
  display: flex;
  padding: 0 0pt;
}

.columns-50 {
  flex: 50%;
}
```

---

![](img/ivac-2022-sample.png)

---

# Summing Up

---

## Summing Up

- You can make nice PDFs straight from R

- You do need to know some HTML and CSS

- At least it's not LaTeX!

---

# `pagedreport`

---

![](img/windmill.gif)

pagedreport.rfortherestofus.com

---

# Quarto?

---

![](img/quarto-2023.png)

???

https://github.com/quarto-dev/quarto-cli/discussions/1716

---

background-image:url("img/mine.jpg")

# Additional Resources

---

## Additional Resources

+ To learn more about `pagedown`, you can have a look at the [documentation](https://pagedown.rbind.io/) or the [issues](https://github.com/rstudio/pagedown/issues) on Github

+ To get a deeper knowledge of the foundations, look at the Paged.js [documentation](https://Pagedjs.org/documentation/) or their [Gitlab](https://gitlab.coko.foundation/Pagedjs/Pagedjs)

+ To learn HTML and CSS, you can either have a look at Mozilla tutorial ([HTML](https://developer.mozilla.org/en/docs/Web/HTML) + [CSS](https://developer.mozilla.org/en/docs/Web/CSS)) or the W3C tutorial ([HTML](https://www.w3schools.com/html/) + [CSS](https://www.w3schools.com/css/))