Top Five CSS Customizations for R Presentations

The presentations feature of RStudio is awesome. You can put together a nice-looking presentation relatively quickly that you can then export to HTML5 (complete with transitions) or PDF.

RStudio will execute any R code in your presentation when you export it, so any syntax errors will be flagged (it won't export). To top it off, the whole thing is reproducible.

However the slide layout and styling options in the current version of RStudio (0.98) are rather limited. R-Presentations will undoubtedly support more options in future versions, but in the meantime you can customize the look of your slides using CSS.

I am definitely not a CSS guru, but with a bit of trial and error I was able to make several customizations for my first R-Presentation [rpres file] to get it to look just how I wanted.

Below are my top-five CSS customizations for R-Presentations.

Styles that you will use throughout the presentation should be defined at the very top of your RPres file, before the title slide. This includes any tweaks you make to the built-in styles. For example, the beginning of your RPres file may look like:

<style>
.footer {
    color: black;
    background: #E8E8E8;
    position: fixed;
    top: 90%;
    text-align:center;
    width:100%;
}
</style>

A Statistical Analysis of Cal Football 2013: What Went Wrong?
========================
author: Sonny Dykes
date: December 7, 2013

To apply custom styles, first note that customizing the appearance of your presentation with CSS styles requires using HTML codes instead of the simplified markdown syntax. But don't worry if you haven't done much HTML editing, it's not that hard.

After you define global styles, you can apply them to specific elements in your presentation by using the 'class' argument in the HTML tag. For example many styles can be applied with the <div> tag, which defines a block of text (and other content) on a web page:

<div class="footer">This block of text will appear with the 'footer' style</div>

You can also define styles for individual elements using the 'style' argument in the tag.

<span style="font-weight:bold; color:red;">This text will appear red and bold</span>

Or you can also combine these approaches – in other words invoke a global style using the 'class' argument, and an individual style with the 'style' argument. The browser will apply the global style first, and then the individual style. For example:

<div class="footer" style="margin-top:-200px;">
This block of text will be shown with the global 'footer' style, but it will be shifted up by 200 pixels because we have assigned a negative value to the 'margin-top' property in the 'style' argument of the div tag.
</div>

I was unpleasantly surprised to see my slide titles automatically hyphenated. You can get rid of this annoying behavior by adding the following tweaks to some default styles (at the top of your RPres)

<style>
.reveal h1, .reveal h2, .reveal h3 {
  word-wrap: normal;
  -moz-hyphens: none;
}
</style>

I thought the font size of code output was much too big when I exported my presentation to HTML. You can adjust this by defining an alternative style and then using it as the 'class' for individual slides.

<style>
.small-code pre code {
  font-size: 1em;
}
</style>

Then we specify this style as the 'class' for individual slides:

All About Cars
========================
class: small-code

The current version of RStudio allows you to create slides with a two-column layout. This is great, but often we want to add a textbox that spans both columns, for example a footer. You can do this by defining a global style called 'footer' that uses fixed positioning to 'float' above other elements on the slide.

The problem with this however is that where the footer should appear may vary from slide to slide. To tweak the location of the footer on individual slides, when you call it you can also specify a vertical and/or horizontal offset using one of the margin properties.

Top of RPres:

.footer {
    color: black; background: #E8E8E8;
    position: fixed; top: 90%;
    text-align:center; width:100%;
}

To add a full-width footer to an individual slide, you create a block of text with the <div> tag and tell it to use the 'footer' class. If you're using a two-column layout, put the <div> block with the footer text before everything else.

<div class="footer" style="margin-top:-150px;font-size:80%;">
This text is my footer text<br>
Normally, the top of the text block would appear 90% of the way down the slide (i.e., at the bottom), because that is how the 'top' property is defined in the 'footer' style. However this particular footer wraps onto multiple lines, so we shift it up by specifying a negative value for the 'margin-top' property.</div>

R-Presentation has a convenient short code for embedding an image file on a slide, but if you want it to go somewhere specific (e.g., the center), you'll probably need to use CSS. I dealt with this by creating a global style that would place the content in the very middle of the slide, and then add an appropriate vertical or horizontal shift for individual images.

<style>
.midcenter {
    position: fixed;
    top: 50%;
    left: 50%;
}
</style>

Modern browsers support transparent backgrounds when displaying images, but unfortunately when you export a R Presentation from RStudio all transparency in external image files is 'overridden' by some additional styles that applied to images by default.

To preserve the transparency, you can manually remove the problematic properties in your <img> tag:

<img src="olympic-logo_800x400.png" style="background-color:transparent; border:0px; box-shadow:none;"></img>

See how this looks on the next slide.