31

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?

Improve this question

4 Answers 4

Reset to default
41

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> ....

Improve this answer
8

Use this code in section:

<section style="text-align: left;">
Improve this answer
1
  • 1
    This solution is helpful if you want to change specific slides! I did find, that if I set the style to left justify for the whole presentation, I can't use this method to override and centre justify another slide. But this solution works great if you want to left justify text slides and centre image slides!
    – June Skeeter
    Commented Sep 3, 2021 at 20:22
6

If you start changing the CSS options, you might as well do that right in the theme's CSS file, where most of these things are defined anyway.

For example, you will find this in the "sky.css" file in the themes folder. 

.reveal p {
  margin: 20px 0;
  line-height: 1.3; }

Just add the CSS snippet "text-align: left;" to this, and your paragraphs will be aligned as desired:

.reveal p {
  margin: 20px 0;
  line-height: 1.3;
  text-align: left; }

It probably makes sense to rename that CSS to something like "mysky.css" and link to the new theme in your slides' header. That way, if you run into issues, you can always switch back to the original theme. In my experience, this works very nicely.

Improve this answer
4

I'm using external markdown and as per the accepted answer I added

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

at the bottom of the <head> (after all other CSS <link>s).

This works great but now all my <p> text is left-aligned. So I re-appropriated the <h6> tag (which doesn't get used much) for any 'non-bold' text that I still want to be center-aligned.

<style type="text/css">
    p { text-align: left; }
    .reveal h6 {
        text-transform: none;
        font-weight: 400;
    }
</style>

I just use it in markdown with a 6-hash prefix:

######Some non-capitalized, normal weight, centered text

Finally my images were all in <p> tags and so they were also left-aligned, but I wanted them to remain centered and only have block text left-aligned. I hacked this by prefixing the image markdown with any <h> tag on the same line, e.g. using an <h1> single hash prefix:

#![alt text][path/to/my/image.png]
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.