R Markdown slides with reveal.js: How to left align list items (bullets and numbers)?
Asked Answered
U

1

6

How can I align the list items at the left page margin of the slide?

It seems that revealjs is always using the longest list item text, centers it at the slide then left aligns all other list items under this one:

---
title:
output: 
        revealjs::revealjs_presentation
---

## list items
* a
* picture
* says more
* than a thousand words

or

1. item 1
1. item 2

I have tried to embed a CSS style sheet after the slide header, but it has no impact:

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

PS: I am using RStudio with the revealjs package.

Undoing answered 7/12, 2016 at 18:20 Comment(0)
U
15

I have found the solution.

For a consistent layout I left align not only the unordered and ordered list items but also text paragraphs using the following embedded style:

---
title:
output: 
        revealjs::revealjs_presentation
---

## list items

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

* a
* picture
* says more
* than a thousand words

or

1. item 1
1. item 2

Sources:

  1. You can browse the list of styles that revealjs defines to find out the active property values:

    https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss

  2. Examine the semantics of the different property values to find your desired layout, e. g. for the display property:

    http://www.w3schools.com/cssref/pr_class_display.asp

Undoing answered 8/12, 2016 at 19:42 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.