Search results

Reveal JS: An HTML5 alternative to PowerPoint, with support for SVG graphics

by Tom Johnson on Mar 11, 2015
categories: technical-writing

In trying to find a slide format that supported SVG image formats, I was exploring some PowerPoint alternatives and stumbled across Reveal JS. I like Reveal JS so much, I do not think I will ever use PowerPoint again.

Here's the slide show I put together with Reveal JS: Innovation in Technical Communication.

Press F to switch to full screen mode, and then press your space bar to progress through the slides. If you want to see my speaker notes, press S.

Reveal JS is a JavaScript library that renders HTML5 tags in a presentation-like way. To work with it, do the following:

  1. Download Reveal JS from Github here: http://lab.hakim.se/reveal-js/#/.
  2. Open the index.html page in a text editor.
  3. Customize the content inside section elements.

See the documentation here or simply fork my slides to see the code.

Here's a quick Reveal JS tutorial:

Reveal JS tutorial

Advantages of Reveal JS

Why would you want to use Reveal JS instead of PowerPoint? Here are a few reasons:

  • Work directly in simple HTML code instead of a WYSIWYG interface.
  • Support SVG image types (more details below).
  • Progress slides both vertically and horizontally.
  • Easily manipulate all slide information on the same page.
  • Avoid PowerPoint's complexity and verbose feature set.
  • Display slides in any modern browser.
  • Host slides on Github to continually update the content.
  • Theme the slides with CSS styles and effects.
  • Get syntax highlighting with code samples.

To upload to slideshare, you can render the presentation as a PDF by adding ?print-pdf to the end of the URL. It actually looks great. Here's the PDF version of my slides.

Limitations of Reveal JS

Here are a couple of the limitations:

Callout overlays on top of images. Let's say you want to add a text box on top of an image. Well, unless you want to create a style that has an absolute position, this is going to be cumbersome. Here's a better workflow instead. If you want a text overlay, place your raster image in an Adobe Illustrator artboard and add the text callout there. Export the ai file to an SVG, and then reference the SVG file in your HTML.

Alternatively, using a graphics editor like Snagit, add your callout there (but note that as a raster graphic, it won't be as crisp).

Dynamic actions on slides. In PowerPoint, you can animate objects based on action triggers in specific sequences. You can embed videos in Reveal JS slides, but if you like to add a lot of slide animations, you may find Reveal JS limiting.

Vertical navigation

Vertical navigation is one of the features that really sold me to Reveal JS. By nesting section elements inside of other section elements, the navigation progresses vertically. This makes much more sense to me in a presentation because often I want to explore the same topic with more depth rather than continuing on to another topic.

With my presentation, each time I have a vertical slide progress, I used a contrasting color for the sub-section to signal readers that the flow goes down.

(If you press the space bar, the flow automatically follows the vertical workflow, but not if you're using the right arrow key to progress through the slides.)

SVG format

Okay, here's the big feature for me. I am a fan of Adobe Illustrator, and I've used it extensively in preparing previous presentations. For example, take a look at a previous slidedeck here, where each slide was actually exported to PNG from an Illustrator artboard.

The benefit with SVG graphics is that, in the SVG format, they remain crisp at any scale, and the format is supported by all modern browsers. This is important for slides because the slideshow mode expands the scale. Additionally, different browsers will view the same graphic at different scales and resolutions.

You can test it out by going to some of the slides containing vectors in my presentation, such as this one. Scale the browser small and large -- the text is still just as crisp at any resolution.

Here's how I handled the vectors with my innovation slides. I created an Illustrator file called innovation.ai. I put all my artboards in this same file. Each artboard's dimensions are about 770 x 470 (a factor of 300px taller). Each artboard has a separate name. When I'm ready to export to SVG, I select "Save As" and choose "SVG" (and I selected embedded rather than linked in the options).

Each artboard gets saved as innovation_artboardname.svg, where artboardname is whatever I've called the artboard. In my Reveal JS page, I incorporate the SVG image like this:

 <img src="media/vectors/innovation_artboardname.svg"/>

You can also add the image as a background image, like this

<section data-background="media/vectors/innovation_strategies.svg">

I can simply update all my artboards in Illustrator, save to SVG, and all the vector images in my slides get updated.

The size of the SVG graphic is the size of your artboard. You can constrain the size by adding a max-height and max-width (use percentages) to a style, and then applying it to your image element. I do this for subsection slides that contain SVG images, because the space is smaller.

Here's my CSS style:

.slides img.shortened {
    max-width: 80%;<br />
    max-height: 80%;<br />
}

And here I applied it to the image: 

<img class="shortened" src="media/vectors/innovation_artboardname.svg"/>

If I want to add a text overlay to a raster graphic, I add the raster graphic to an artboard and add the text overlay on top of it.

Essentially the Reveal JS code consists of a bunch of references to all of these SVG images, which are exported from the Illustrator file.

Granted, if you don't use Illustrator and don't care about crisp vector graphics, this method probably isn't for you. But I enjoy the freedom and flexibility of Illustrator for graphics much more than PowerPoint.

Publishing

Since the Reveal JS slide is just HTML and other code, you can upload it to Github. I created a Github Pages branch for a Github repository and published my slides there. Github Pages lets you use your Github repository as a web host.

Here's my innovation Github repo: https://github.com/tomjoht/innovation/

Here's the Github Pages rendering of the repo: http://tomjoht.github.io/innovation/

When I want to update and publish the slides, I just push the update to my repo using the following sequence in the command line:

git add --all
git commit -m "my commit message"
git push

Conclusion

If you want to try something different for your next presentation, try [Reveal JS](http://lab.hakim.se/reveal-js/#/]. Note that there's also a commercial product built from Reveal JS called slides.com. However, in my experience, it's not as enjoyable as working directly with the Reveal JS template. (It does, however, allow you to easily add text overlays on top of graphics. But I don't think it supports SVG image types.)

For future presentations, I'm really sold on using Reveal JS instead of PowerPoint. Not only do you have a lot more flexibility and control, it's also simply more fun to work in code.

About Tom Johnson

Tom Johnson

I'm an API technical writer based in the Seattle area. On this blog, I write about topics related to technical writing and communication — such as software documentation, API documentation, AI, information architecture, content strategy, writing processes, plain language, tech comm careers, and more. Check out my API documentation course if you're looking for more info about documenting APIs. Or see my posts on AI and AI course section for more on the latest in AI and tech comm.

If you're a technical writer and want to keep on top of the latest trends in the tech comm, be sure to subscribe to email updates below. You can also learn more about me or contact me. Finally, note that the opinions I express on my blog are my own points of view, not that of my employer.

© 2024 Tom Johnson