Menu
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?
841
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.
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.
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> ....
165
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.
27
Use this code in section:
<section style="text-align: left;">
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]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
