The reveal.js logo

As I’ve written about before, I use \(\LaTeX{}\) to create a lot of the written material I produce. This tends to includes the presentations which I give, which I usually write in beamer. This is how the \(\LaTeX{}\) presentation slides (source here) which I’ve shared before were created.

Why Beamer?

When a presentation is created using Beamer, the output PDF is automatically given the usual aspect ratio for a presentation, and each slide is turned into a separate page of the resultant PDF. This means that the presentation can be ‘played’ using any PDF viewer, and moving to the next page gives the effect of changing slide. Beamer also supports the gradual reveal of content, as in other presentation formats, creating separate pages in the output PDF for each stage of your slides.

So why use Beamer and \(\LaTeX{}\) for a presentation? Firstly, the fact that the output is PDF makes the presentation highly portable. The machine you use to give the presentation doesn’t need to have any particular piece of presentation software (such as Powerpoint, Keynote or Impress) installed in order for the presentation to display properly – all that’s required is a PDF viewer. Secondly, you have the formatting power of \(\LaTeX{}\), enabling advanced mathematics to be displayed in high quality (alongside computer code, using the listings package for example).

However, \(\LaTeX{}\) also has some disadvantages for presentations. I’m not aware of any well supported way to add dynamic content into PDFs, so including gifs or videos directly in your presentation is risky. Similarly, the limitations of PDF as a format mean that there’s no way to have dynamic slide transitions. Also, whilst Beamer has a number of themes which can be applied, they all look fairly uniform, and editing a theme can be tricky. Finally, PDF is not the most accessible format1, which may make it hard for those with additional needs to engage with the slides independently.

Why reveal.js?

reveal.js is a framework for creating a presentation using html, css and javascript. A demo of reveal.js, created by the developer, is available here. The presentation using simple html markup, and is then turned into an interactive presentation using a javascript library. The slide content can also be written using markdown. This library takes care of showing only one slide of the presentation at a time, and transitioning between the slides using either keyboard input (on devices with physical keyboards), onscreen buttons, or by swiping (on devices with touchscreens).

revealjs presentations are capable of dynamic content in a way that is impossible for PDFs. Slides support dynamic transitions, animation, dynamic backgrounds and the ability to embed arbitrary external content through the use of iframes. I used this latter feature in a recent talk to embed an image of an icosahedron that I could manipulate directly from within my talk2. I also find it much easier to adjust the theming of a reveal.js presentation using CSS than tweaking a Beamer theme. This makes presentations produced with reveal.js exciting and interactive in a way that Beamer presentations are not. The html markup of a reveal.js presentation should also be more accessible to screenreaders than the PDFs produced by \(\LaTeX{}\) and Beamer.

Presentations created with reveal.js also manage to maintain some of the same advantages as those created with \(\LaTeX{}\). In particular, since the output is html, all that is needed on the presentation machine is a web browser3. These presentations can also display \(\LaTeX{}\) maths using MathJax, which is the standard way of displaying maths on the web4 - see here for details.

Finally, reveal.js has some inbuilt features that I find quite useful. Firstly, there’s an overview mode for moving quickly through your presentation and seeing a large number of slides at once. Secondly, the built in presenter mode – which contains a view of the current slide, the upcoming slide, presenter notes and a timer – can be very helpful while giving your presentation.

In short, I’d recommend giving reveal.js a try. I find the work involved in producing a reveal.js presentation about the same as producing the same presentation in Beamer. However, the ability to add dynamic content, as well as the additional features such as the presenter mode make reveal.js very appealing.

  1. This is a whole thing, worthy of at least one post all by itself. It is possible to create PDFs that meet certain accessibility standards, but this can be quite a lot of work, and only certain products are capable of producing suitably accessible PDFs. I don’t know much about the details of created accessible PDFs from \(\LaTeX{}\), beyond it being difficult, but the following blog post seems to cover this reasonably well. ↩

  2. I was going to include an example of this here, but there seems to be a bug in the Wolfram code for including cloud objects in an iframe when using Safari. It currently works in Chrome, and strangely worked in Safari in my talk when it was loaded on a revealjs slide, but doesn’t work in isolation (or I’m doing something stupid). Hopefully I’ll find a way to get this to work at some point, but for now I’ll just include the example in my playground. ↩

  3. Note that in order to display correctly, you need the javascript and css files from reveal.js, as well as the actual talk html. This is still portable in the sense that it can be delivered using (almost) any computer however. ↩

  4. All the equations on this site are rendered using MathJax. ↩