7  Elements

7.1 Style menu button

The menu button you see in the lower left-hand side of the slide. Styling it can be done by setting the $link-color sass variable. If you want a different icon, or have it colored differently than $link-color you need to specify it directly as the color is hardcoded into the svg. The icon is specified as the background image of .reveal .slide-menu-button .fa-bars::before.

.reveal .slide-menu-button .fa-bars::before {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(42, 118, 221)" class="bi bi-list" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/></svg>') !important;
}

The color is specified by the fill="rgb(42, 118, 221)" part of the svg. But since this is an image, we can use whatever image we want.

.reveal .slide-menu-button .fa-bars::before {
background-image: url('https://cdn-icons-png.flaticon.com/512/2163/2163350.png') !important;
}

Slide showing a custom hamburger menu icon: the default three-bar icon is replaced with a custom image via CSS background-image on .reveal .slide-menu-button .fa-bars::before.

qmd scss

7.4 Showing quarto code

This one isn’t as much a slidecrafting tip, as it is a quarto tip! If you are showing how to do something in Quarto using Quarto you need this tip. In essence what we are working with are unexcuted blocks.

Adding a markdown cell around what you want to show. Important to use more ticks than any of the inside cells inside.

Using double curly brackets to indicate that the code block should not be executed. The following code when used in a quarto document will render as shown in the example

```` markdown
This is **Quarto** code

```{{python}}
1 + 1
```
````

Slide demonstrating how to display Quarto/R code as literal unexecuted source using double curly brackets ({{python}}), so the code block appears verbatim rather than being run.

qmd

7.5 Changing plot backgrounds

Plots and charts are useful in slides. Changing the background makes them fit in. This post will go over how to change the background of your plots to better match the slide background, in a handful of different libraries.

7.5.1 Why are we doing this?

If you are styling your slides to change the background color, you will find that most plotting libraries default to using a white background color. If your background is non-white it will stick out like a sore thumb. I find that changing the background color to something transparent #FFFFFF00 is the easiest course of action.

Why make the background transparent instead of making it match the background?

It is simply easier that way. There is only one color we need to set and it is #FFFFFF00. This works even if the slide background color is different from slide to slide, or if the background is a non-solid color.

7.5.2 base R

we don’t have to make any changes to the R code, we can supply the chunk options dev and dev.args for the chunk to "png" and list(bg="transparent") respectively and you are good. The chunk will look like this.

```{r, dev = "png", dev.args=list(bg="transparent")}
plot(mpg ~ disp, data = mtcars, col = factor(am), pch = 16, bty = "n")
```

You can also change the options globally using the following options in the yaml.

knitr:
  opts_chunk:
    dev: png
    dev.args: { bg: "transparent" }

7.5.3 ggplot2

ggplot2 are handled the same way as base R plotting, so we don’t have to make any changes to the R code, we can supply the chunk options dev and dev.args for the chunk to "png" and list(bg="transparent") respectively and you are good. The chunk will look like this.

```{r, dev = "png", dev.args=list(bg="transparent")}
library(ggplot2)
mtcars |>
  ggplot(aes(disp, mpg, color = factor(am))) +
  geom_point() +
  theme_minimal()
```

You can also change the options globally using the following options in the yaml.

knitr:
  opts_chunk:
    dev: png
    dev.args: { bg: "transparent" }

7.5.4 matplotlib

With matplotlib, we need to set the background color twice, once for the plotting area, and once for the area outside the plotting area.

fig = plt.figure()
# outside plotting area
plt.axes().set_facecolor("#FFFFFF00")

# your plot
plt.scatter(x, y, c=colors)

# inside plotting area
fig.patch.set_facecolor("#FFFFFF00")

7.5.5 seaborn

For seaborn, we also set it twice, both of them in set_style()

sns.set_style(rc={'axes.facecolor':'#FFFFFF00',
                  'figure.facecolor':'#FFFFFF00'})

7.5.6 Source Document

The above was generated with this document.

source document

7.6 Plot sizing

Plots and charts are useful in slides. But we need to make sure they are sized correctly to be as effective as possible.

7.6.1 auto-stretch option

Revealjs slides default to having the option auto-stretch: true, this ensures that figures always fit inside the slide. You can turn it off globally like this.

format:
  revealjs:
    auto-stretch: false

or on a slide-by-slide basis by adding the .nostretch class to the slide.

## Slide Title {.nostretch}

We see how they affect sizing in the following slides first with the default, and second with .nostretch.

Plot slide with auto-stretch: true (default): the figure is automatically scaled down to fit within the slide boundaries.

Same plot slide with .nostretch class: the figure is shown at its natural size, potentially overflowing the slide.

By themselves, they look pretty similar. One occasion where you really notice the difference is when there are other elements on the slide. auto-stretch makes sure the image fits by making the image smaller as seen below.

Plot and title text on the same slide with auto-stretch enabled: image is shrunk to fit alongside the other content.

Same slide with .nostretch: image renders at full natural size and may overlap or push other content off the slide.

7.6.2 Sizing Options

When sizing plots we need to remember that we have to deal with two kinds of sizes. First is the size of the actual file on disk, this is controlled using out-width and out-height. Next is how big the image is supposed to be in the document, which is controlled using fig-width, fig-height, and/or fig-asp. Lastly, you can control the location using fig-align and the resolution using fig-dpi.

All of these numbers will change depending on whether you have a title or other elements on your slides, what fonts you use, and the aspect ratio of the slides themselves.

7.6.2.1 out-width, out-height

Setting these options affects the size of the resulting image on disk. If they are set smaller than usual, we get an image that doesn’t take up the whole screen.

```{r}
#| out-width: 6in
#| out-height: 3.5in
```

Plot with out-width: 6in, out-height: 3.5in: the saved image file is small, resulting in a figure that does not fill the slide.

Comparison slide for the small out-width/out-height example, shown alongside a default-sized chart.

I don’t find myself using these options much as I tend to want images that take up most of the space, but they are useful to know.

7.6.3 fig-width, fig-height

I end up using fig-width and fig-height the most out of the options shown in this blog post. I find that the default values are too high, making the text on the plot too small for the viewer to see. Especially for an in-person audience.

Below is the same chart 4 times with different value pairs for fig-width and fig-height. Notice how the default values appear to be around fig-width: 9 and fig-height: 5.

Chart with fig-width: 9, fig-height: 5 (Reveal.js defaults): text labels on the chart appear small and may be hard to read for an audience.

Chart with reduced fig-width and fig-height: larger text relative to the plot area, improving readability for live audiences.

Another fig-width/fig-height combination showing how the ratio between dimensions affects text and element sizes on the chart.

Fourth fig-width/fig-height variant in the comparison series, demonstrating that smaller values produce larger, more legible chart text.

All of the above figures have roughly the same aspect ratios, but if you want others you just specify different values. Like this square chart below.

Square chart using equal fig-width and fig-height values, demonstrating how aspect ratio is controlled independently of the slide dimensions.

7.6.4 fig-asp

You might have noticed that the ratios shown in the last section weren’t identical. Because unless you deal with 1-2 or 1-1 ratios you are going to get decimals very fast. And you have to recalculate small things over and over again. This is why fig-asp is amazing. Simply determine the aspect ratio between the height and width, set that as the fig-asp and then you just have to set one of fig-height or fig-width. Is it too small? increase fig-height and keep fig-asp the same. is it too big? decrease fig-height and keep fig-asp the same.

Chart using fig-asp to fix the aspect ratio: changing fig-height scales the chart proportionally without needing to update both dimensions.

Same fig-asp ratio at a different fig-height, showing how the chart scales up or down while maintaining consistent proportions.

7.6.5 fig-align

Unless your chart fits fully inside the slide then it tends to be left aligned, you can change that with fig-align, setting it to left, center or right.

Chart with fig-align: left: the figure is positioned against the left edge of the slide content area.

Chart with fig-align: center: the figure is centered horizontally on the slide.

Chart with fig-align: right: the figure is positioned against the right edge of the slide content area.

7.6.6 fig-dpi

Lastly, something you might need to worry about is the Dots Per Inch (DPI) specified by fig-dpi. This is a measure of resolution in your chart. If you see your chart becoming a little blurry, increase the dpi until it isn’t anymore. Note that dpi will result in larger file sizes, so only change if you have to.

Chart at standard DPI: text and elements may appear slightly soft at high display resolutions.

Same chart at higher fig-dpi: text and lines are crisp and sharp, at the cost of a larger file size.

7.6.7 Make work with columns

even if you set the option globally, you will have to make slide-by-slide adjustments, such as with charts in .columns. Below is one example of how we can modify the fig-asp to make it look decent in a column layout.

Chart inside a two-column layout with fig-asp adjusted to fit the narrower column width, preventing the figure from overflowing its column.

7.6.8 Source Document

The above was generated with this document.

source document