Guide to customizing R slides

using Quarto & Reveal.js

Monica Thieu

Spelman College WiSTEM

7/19/23

How to adjust slide aesthetics

Why make slides this way?

These slides are rendered to fancy HTML under the hood using a JavaScript package called reveal.js¹.

In some ways, HTML slides are less flexible. You don’t get a point-and-click interface to put things on slides. If you need fancy animations and layout tools, you might prefer to use PowerPoint or Keynote.

1. The R-slides-specific guide: https://quarto.org/docs/presentations/revealjs/

Why make slides this way?

However, when you are primarily presenting the output of code, HTML slides allow you to tweak your code without having to constantly replace graphs.

And you can still make slides that are aesthetically pleasing and clear to read.¹

1. And in fact, still pretty fancy, with clickable widgets etc! HTML is powerful!

Built-in slide themes

Reveal.js has some built-in themes¹ you can use.

You can specify a theme in the YAML settings on the very top of your document, like this:

format:
  revealjs:
    theme: default

1. https://quarto.org/docs/presentations/revealjs/themes.html

Customizing slide themes

The easiest way to add some custom flavor is to start with a slide theme that does most of what you want, and then overwrite some of the defaults.

You can set those aesthetic variables in a Sass¹ code file, and then tell your code document to refer to that theme file when styling the presentation.

1. https://quarto.org/docs/presentations/revealjs/themes.html#sass-variables

Customizing slide colors

In the external Sass file, you can set variables for things like slide and text color¹.

$body-bg: #F9F1DC;
$body-color: #08605F;
$link-color: #9883E5;

1. I used Coolors.co to generate this palette!

Customizing slide fonts

You can also use custom fonts from Google Fonts.

You’ll need to import these in the Sass file.

(The way R gets custom fonts on graphs is different from the way reveal.js gets custom fonts on slides, so you have to import your fonts twice.)

Customizing slide fonts

On the Google Fonts page, select the fonts and weights you want to import.

Customizing slide fonts

Then, use the selection panel on the top right to get the font import code.

Choose the @import option to get the Sass-compatible code.

Customizing slide fonts

Copy and paste the middle line of code (just the line starting with @import) into the top of your Sass file.

Then, set the font variables to use the font you’ve just imported:

$font-family-sans-serif: "Nanum Gothic", "Source Sans Pro", sans-serif;

The slides will attempt to use the fonts in the priority order you specify.

Including the backup fonts after the first one ensures you have some control even if the Google fonts fail to import for some reason.

Adding background images

For slide-specific background images, you can set your desired background image as a slide property on the slide title line.

## Slide title {background-image="url/or/path/to/image.png"}

The background image can either be hosted on the web, or it can be uploaded to your RStudio Cloud project. You’ll need to give the correct path to the image either way.

Adding background images

If your background image is on the darker side, set background-color="black" as well, even though it won’t be visible. This will trigger the text to print white on top of the background image.

You can also change background-opacity to make your background image appear more muted.

Placing images on slides

The basic Markdown syntax for placing an image on a slide is:

![](url/or/path/to/image.png)

The image path goes in the () soft parentheses, which tells Markdown/reveal.js to go to that image link and render the image into the slide.

Placing images on slides

You can modify the image alignment by setting an extra setting at the end of your image embedding code.

![](url/to/image.png){fig-align="center"}

Placing images wherever you want on slides

In your image embedding code, you can use the .absolute property to set xy coordinates on your slide for the picture to appear at.

Be careful with positioning! Absolute-placed images will appear on top of text.

Placing content in columns

You can place content in columns using container¹ syntax.

1. If you are familiar with HTML, these are div containers under the hood.

Placing content in columns

To create column containers, the syntax looks like:

:::: columns

::: {.column}
Content in the first column
:::

::: {.column}
Content in the second column
:::

::::

You can put in as many columns as you want!

By default, columns will be equally sized, but you can manually make some columns wider or narrower using the width property, like:

::: {.column width="40%"}
Column stuff in here
:::

Placing plots in columns

You can even put code chunks and plots in column containers.

You will need to manually change the aspect ratio of your plots to fill the column space, though.

Placing plots in columns

Use the fig-asp chunk setting, set with the special settings comment #| to set your desired aspect ratio (height/width).

#| fig-asp: 0.7
next_plot +
  theme(text = element_text(size = 24))

You may also want to make plot text extra large to compensate for the smaller plot.

Embedding YouTube videos

Embedding YouTube videos

You can also embed YouTube videos. Video containers have to be specified with two sets of curly braces AND carets, like below:

# DO NOT INCLUDE THE BACKSLASH IN YOUR REAL CODE!
# It's only here to make the rest of the code show up in the slide
{{\< video url/to/video width="100%" height="85%" >}}

You do need to set the width and height manually, because the default video size is tiny.

How to use presentation features

Incremental slide builds

In general, I recommend building slide content incrementally whenever possible.

Slowly adding information onto slides helps keep your audience focused on whatever you’re currently talking about. Help reduce their attention load!

Incremental slide builds

There are a couple features you can use to turn on incremental slide builds.

First, in the header of your document, set incremental: true in the sub-settings for reveal.js slides so that by default, any numbered or bullet-pointed list will animate in one at a time.

---
title: "Your presentation title"
author: "Your name"
format:
  revealjs:
    incremental: true
---

(If you then want to turn incremental building off for any list, you can… but why would you? 😛)

Incremental slide builds

To make any arbitrary content on your slide animate in one at a time, divide up lines in your main text with three periods separated with spaces: . . .

First line on your slide

. . .

Second line on your slide

If the incremental build doesn’t render, make sure you have those empty lines above and below the . . .

(This might happen if you want to do an incremental build in between a regular-text section and a plot that comes out of a code chunk.)

Adding speaker notes onto slides

Using the same ::: container syntax as you can use for adding things like columns, you can also add speaker notes onto slides.

Text that appears on your slide

::: {.notes}
Text that appears in presenter notes
:::

Adding speaker notes onto slides

Hit the s key (for speaker!) on this slide to open a second browser window with the speaker notes. As long as either the slides window or the speaker notes window is the active window, you can advance your slides. The speaker notes window also features:

• a clock
• a timer (that only counts from when you opened this speaker notes window, sorry)
• a next-slide preview

Welcome to the speaker notes! Remember, most of your text should be here, and coming out of your mouth, not showing up on the slide.

These slides are special because they’re designed to be referenced even when the speaker (me) isn’t present, which is why I’m loading them up with text.

But I’m still being careful not to put too much text on any one slide!