How to customize font size in R Markdown documents
I’m sitting in the back of the room, squinting, trying to read the text on the R Markdown Storyboard projected on the huge screen in the front of the room when one of the workshop attendees asks Carl Howe, our instructor for the day: “How can you customize the font size on R Markdown dashboards”?
“Good timing!”, I think. We’re at rstudio::conf 2020 in San Francisco participating in the R Markdown and Interactive Dashboards workshop, and I’m still somehow convinced that I have 20/20 vision, even though I barely passed my last eye exam 5 years ago. It turns out many other folks in the room also can’t read the small text, and they too are wondering how to customize the font attributes in their RMD reports and dashboard.
This is the first day of the workshop, and Carl’s already walked us through how you can use RMD to easily create all sorts of different things like professional looking PDF and Word reports, HTML pages, and even interactive dashboards. I’ve used RMD for a some time now, but I’ve always accepted the default font color, type, and size. Today, however, we’re going to learn how to edit those things.
PDF Documents
How you edit font size will depend on the type of output you are creating. For PDF documents, you can add the fontsize metadata variable to you YAML header:
Because of the way LaTeX works, you are limited to a fontsize of 10pt, 11pt, or 12pt (unless you use a workaround solution). Any other values you enter will be ignored.
HTML Documents
R Markdown has multiple HTML based report types, including the more simple looking html_document, or the more dashboard like flexdashboard::flex_dashboard, to name a few. These are the reports Carl is focusing on today, perhaps because HTML documents are often the most popular. Like PDFs, they can easily be shared via email as file attachments and anyone with a modern computer can open them. In addition, they can also be easily shared on the web like any normal webpage. Being HTML based, it also means they can be made more beautiful and interactive with CSS and Javascript, even if you don’t know either of those languages.
Carl first shows us how HTML syntax can simply be added to markdown text. For example…
… will return the following:
At this point in the workshop, everybody is now working on building their own flexdashboard with the storyboard option turned on. A storyboard is exactly what it sounds like, it’s a type of dashboard that can be viewed page by page, just like a story (see example here). “How can you customize a specific element on the dashboard, such as all the storyboards?” someone asks.
“The key is to identify the CSS selector” says Yihui Xie, Carl’s co-instructor who also happens to the author of the R Markdown package. In CSS, which is used to define the style of a website, the selectors are used to apply style to specific HTML elements on a webpage. The idea is to write some custom CSS code, and then decide which selectors it should be applied to. “The tricky part is understanding the hierarchy”, Yihui continues, “the whole HTML doc has a nested structure. Inside body, there are many elements. You have to define CSS rules by carefully selecting a CSS selector”.
Yihui then shows us how easy it is to identify the CSS selector for whatever element we want to customize on our dashboard. “One way to do this is with inspect element” he says. After clicking on the “knit” button to create the HTML document, he right clicks on the page and selects “Inspect”. Hovering over each of the HTML elements, he keeps going until the storyboard element we want to customize becomes highlighted itself. This is how we find the CSS selector, which turned out to be quite long, for our storyboard element:
Now that I know which CSS selector to use, I go on to create a CSS file called styles.css with some very basic CSS code:
/* CSS Stylesheet*/
css selector {
font-size: 15px;
}
I replace the “css selector” placeholder text with the actual CSS selector for this storyboard element, .storyboard-nav .sbframelist ul li, which I discovered via the “Inspect” tool. Lastly, I add the css option to my YAML header with a path to the styles.css file I just created, linking the stylesheet to my R Markdown document.
I re-knit my document and see that the text on the storyboard is now much larger than before, just as I wanted it. Not only have I customized the font size, but I’ve set things up in such a way that I can now easily customize the style of any other element on my R Markdown document. It’s now time to break for coffee, but I’m tempted to hang back and and experiment with more CSS properties like font type, color, and padding to continue styling my report.
