Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

reveal.js

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?

like image 841
khinsen Avatar asked Jan 09 '14 11:01

khinsen


4 Answers

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

like image 165
ntc2 Avatar answered Nov 29 '22 00:11

ntc2


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.

like image 27
Christof Avatar answered Nov 28 '22 22:11

Christof


Use this code in section:

<section style="text-align: left;">
like image 38
Daniel Ikenaga Avatar answered Nov 28 '22 23:11

Daniel Ikenaga


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]
like image 32
William Myers Avatar answered Nov 28 '22 22:11

William Myers