Left align slide text

[afredston]

I'm creating a presentation in rmarkdown with reveal.js and would like the text on my slides to be left-aligned, not centered. I understand there is a global option to toggle center on/off, but this only affects vertical centering when I knit the HTML file. How do I left-align text for the entire file? The output options I am using are:

output:
  revealjs::revealjs_presentation:
    theme: night
    transition: none
    center: false
    reveal_options:
      slideNumber: true
      progress: true
  beamer_presentation:
    toc: false
    incremental: true

Thanks for the help and for creating such a useful tool!

[sull]

I was just looking for the same config but I think the only way is to adjust the CSS. If you use a theme, you can just add it there.

.reveal .slides > section > section { text-align:left; }

[afredston]

I haven't mastered adjusting CSS in RMarkdown yet, but I just came across this (clumsier) solution on Stack Overflow that left-aligns all text in the slides, although not the titles:

---

<style type="text/css">
  .reveal p {
    text-align: left;
  }
  .reveal ul {
    display: block;
  }
  .reveal ol {
    display: block;
  }
</style>

## First Slide

[bnjmnt4n]

Yep, you can use CSS to style text to left align it. For individual slides, you can even use inline styles, like <section style="text-align: left;"> to do so.

[drfurtado]

I haven't mastered adjusting CSS in RMarkdown yet, but I just came across this (clumsier) solution on Stack Overflow that left-aligns all text in the slides, although not the titles:

---

<style type="text/css">
  .reveal p {
    text-align: left;
  }
  .reveal ul {
    display: block;
  }
  .reveal ol {
    display: block;
  }
</style>

## First Slide

I did follow these steps and it worked great. The only problem is that it adds a blank slide before ## First Slide.

Any ideas on how to solve this?

Here's what I have:

---

<style type="text/css">
  .reveal p {
    text-align: left;
  }
  .reveal ul {
    display: block;
  }
  .reveal ol {
    display: block;
  }
</style>

## Overview

- Intro content here

# this is a vertical slide

Content vertical slide