Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 586
R Yoda Avatar asked Dec 07 '16 18:12

R Yoda


1 Answers

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

like image 57
R Yoda Avatar answered Oct 03 '22 17:10

R Yoda