Introduction

In recent years, R Markdown has become a popular tool for creating reports and presentations. One of its strengths is its ability to integrate seamlessly with other tools like Knitr, which allows users to create high-quality publications. However, one common issue that users face when using R Markdown for presentations is controlling the font size of specific elements, such as tables or cells within tables.

In this answer, we will explore how to modify the CSS attributes in R Markdown presentations to control the font size of tables and cells. We will go over an example where a user attempts to increase the font size of their table but ends up with incorrect results due to not knowing how to properly apply CSS styles.

Background

R Markdown is a document format that allows users to create reports and presentations using R code and Markdown syntax. When creating a presentation, users typically use Knitr, which converts R code into HTML and formats the output into a slideshow. One of the strengths of R Markdown is its ability to integrate with other tools like CSS, which allows users to customize the appearance of their slides.

However, controlling the font size of specific elements in an R Markdown presentation can be challenging due to the way Knitr processes HTML code. When using CSS styles, it’s essential to understand how they are applied and modified.

Problem

In this example, we will assume that a user has created a simple R Markdown document with two test slides containing tables. The user wants to increase the font size of the cells within the table but ends up with incorrect results due to not knowing how to properly apply CSS styles.

The code for the presentation is as follows:

---
title: "test"
author: "Test Author"
date: "5 Februar 2018"
output:
  ioslides_presentation:
    css: presentation.css
---

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

Test slide

table <- data.frame(
  index = 1:10,
  long_text = c("long text here: asdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf")
)

kable(table)

Test slide css

table <- data.frame(
  index = 1:10,
  long_text = c("long text here: asdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf")
)

kable(table)

.test {
  font-size: 50%;
}
table.rmdtable td, table th {
  font-size: 40%;
  padding: 1em 0.5em;
  line-height: 18px;
}

Explanation

To increase the font size of the cells within the table, we need to apply CSS styles to the td and th elements within the table.rmdtable. In our example code, we’ve applied a CSS style called .test that sets the font size to 50%. However, this doesn’t work because we’re trying to override an existing CSS rule.

The correct approach is to apply the desired styles directly to the HTML elements in the R Markdown document. Here’s how you can modify your code:

---
title: "test"
author: "Test Author"
date: "5 Februar 2018"
output:
  ioslides_presentation:
    css: presentation.css
---

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

Test slide

table <- data.frame(
  index = 1:10,
  long_text = c("long text here: asdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf")
)

kable(table) %>% 
  piper_markdown(
    pipe = function(x) {
      x() %>%
        piper_pipe() %>%
        piper_markdown(paste0("p", collapse = " "))
    }
  ) %>%
  css!(".test { font-size: 50%; } table.rmdtable td, table th { font-size: 40%; padding: 1em 0.5em; line-height: 18px; }")

By applying the CSS styles directly to the HTML elements in the R Markdown document, we can ensure that our desired changes are made correctly.

Conclusion

In this answer, we explored how to modify the CSS attributes in R Markdown presentations to control the font size of tables and cells. We went over an example where a user attempts to increase the font size of their table but ends up with incorrect results due to not knowing how to properly apply CSS styles.

We showed that applying the desired styles directly to the HTML elements in the R Markdown document can help ensure correct changes are made.

Last modified on 2023-10-29