How can I get left-justified paragraphs in reveal.js?

Question

Standard HTML paragraphs are displayed centered by reveal.js. I would like to change this to left-justified, like on a normal webpage. I have seen reveal.js presentations that do this, but how does this work?

Answer 1

Solution

You can change how the slides appear by adding some custom CSS to your presentation. E.g., add

<style type="text/css">
p { text-align: left; }
</style>

to left align all paragraphs.

More Examples

You only asked about left-aligned paragraphs, but here are some more complicated examples, in case someone finds them useful:

• Restyle the title part of non-title slides:

  <style type="text/css">
  .reveal .slide h1 { font-size: 200%; text-decoration: underline; }
  </style>
  

• Restyle the title part of the title slide:

  <style type="text/css">
  .reveal .slides .title {
    /* Ugly ... */
    text-shadow: 0px 0px 25px rgb(100,256,0); 
    font-size: 300%;
  }
  </style>
  

The reveal.js default CSS files are complicated, e.g. reveal.css, but I've had good luck with just looking at the generated HTML to figure out what my CSS should target.

Pandoc

All this still works if you're generating reveal.js slides from markdown using Pandoc, which I highly recommend. In that case, put the <style> block in a file and tell Pandoc to insert it with pandoc --include-in-header=<file with <style> block> ....