As a LaTeX fan I’m used to using Beamer for presentations, but the built-in themes are definitely starting to show their age — and writing a custom .sty file looks like a nightmare — so for a while I’ve been looking at trying out an HTML5 framework.

Reveal.js is a great looking HTML presentation framework from Hakim El Hattab.

The first nice option I noticed was reveal.js which seems to find a solid balance between looking sleek and modern, but not generating a prezi-like rollercoaster of a talk. Another project I came across, impress.js, probably leans towards the latter, and needs a decent array of web-dev skills to really customise.

These are both nice solutions but require decent web development skills to take advantage of, else offer limited web UI front-ends. An ideal solution for me would be simple to write and look great from the outset, needing only minor CSS, Javascript and HTML tweaks to build a good-looking and functional slide deck.

Slidify

Enter slidify written by Ramnath Vaidyanathan (github), a wrapper of several libraries which allows you to go from simple R Markdown to slick HTML presentations. The introductory presentation gives a nice overview of what’s possible and how simple these slide decks can be to write.

As the author modestly points out, slidify really is a go-between to other R packages:

• knitr (link) — (a replacement for Sweave) think IPython notebook for R and other languages
• whisker (link) — for making use of mustache (geddit?) “logic-less templating”, which reminds me a lot of MediaWiki markup templates with extended functionality
• R Markdown — the markdown extension introduced by the RStudio team

Together with slidify these packages make writing and customising presentations a breeze, so install the library from github (using Hadley Wickham’s devtools) per the instructions here. It also comes with some great default themes, like Google’s io2012 (my favourite) and deck.js. The video below shows how to get started authoring presentations much better than I could:

Features

There’s a tonne of cool things slidify can do that I haven’t even explored yet, but that look great. Of course, through knitr you can embed R code, including analysis and plot generation, in your presentation, bringing together reproducible analysis and neat presentation of your results. Even cooler, it plays nice with rCharts — from the same author — allowing interactive charts to be embedded in presentations; oh and Shiny applications can be added too, according to this.

Slidify enables straightforward github publishing (just author()) and RStudio allows quick upload to RPubs, both make it trivial to have an online and archived copy of your presentation.

Convert to PDF

A PDF is a nice security blanket to have if you’re worried about unforeseeable display issues on presentation day — it’s a format designed to be environment independent after all. With the io2012 theme, this can be done natively from chrome using the print dialogue, however I consistently found that for my presentation at least, the active slide you are viewing and and sometimes an adjacent slide is glitched in the PDF output.

Chrome print PDF reproducibly bugs out on the active slide, for my presentation at least.

The hacky fix for this was to go to the final slide of the talk, print all but the last slide to PDF, then go back to an earlier slide and only print to file that remaining last slide. Then stitch these files together in Preview (assuming OS X), or Imagemagick or whatever.

Other than this active-slide glitch the PDF conversion worked surprisingly well and the output is passable as a decent presentation, albeit without the finesse of the subtle default transitions.

Update:

On twitter Ramnath points out that this is a recent problem with the Chrome browser, and Safari or Firefox should be able to export to PDF without issue. A quick check with Safari confirms that’s the case for my presentation.

Issues

There were a couple of things that either can’t be done (without digging deep into the js) or at least things I couldn’t figure out after some (non-extensive) googling.

Image features

First, making things appear sequentially (like PowerPoint bullet points) is achieved simply with:

---

## Slide title

> * First bullet point to appear

> * Second...

But for an image to then appear in the same way seems to require a continuation of the ul, i.e. your image needs a bullet point (?). Maybe I’m wrong on this but when included without the bullet point, the image seems to then precede the other bulleted content.

Another issue was resizing and centering images. I made use of the code from this answer on SO to add the quick and dirty CSS / jQuery to auto-centre / reduce oversized images for the slideshow. For me it would be nice for this to be default behaviour, but I suppose for a web developer this is trivial everyday stuff:

<!-- Limit image width and height -->
<style type="text/css">
img {     
  max-height: 560px;     
  max-width: 964px; 
}
</style>

<!-- Center image on slide -->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(function() {     
  $("p:has(img)").addClass('centered'); 
});
</script>

RStudio integration

This caused some confusion for me, but RStudio actually has its own presentation framework and uses slightly different markdown syntax to create it. On reviewing the two, it doesn’t seem as developed as Slidify yet, and the defaults aren’t as polished as the io2012 deck. The confusing part is, somewhere between the packages slidify and slidifyLibraries a function overloads RStudio’s Knit HTML button, faking seamless integration.

The result is that the IDE is a great place to write the presentation, but I can’t help thinking, as was mentioned on twitter recently, that the slidify framework would make a nice alternative or replacement for RStudio’s current offering.

Customising the title slide

One of the problems I had was editing the theme’s title slide. Most of the presentation is amenable to CSS hacking but the title slide is stubbornly hardcoded. (Well, it’s not of course but the file is buried in the library install.)

The way I got at this file was by changing the presentation mode (within the YAML frontmatter) to selfcontained, and run slidify, copying the libraries folder to the same directory as your .Rmd file. Then, for the io2012 deck, the title slide template is at (thanks Ramnath):

libraries/frameworks/io2012/partials/titleslide.html

Conclusion

I found slidify to be a great package and I ended up with, what I consider to be, the cleanest and nicest-looking presentation I’ve made to date. Also I’ve learnt a bit of web-programming along the way! I expect I’ll be switching from beamer to slidify for future talks too.

The final(ish) presentation in all its glory. Link may not work for long.