Spacing changes when using xaringan with ninjutsu and going from a list with one bullet point to two bullet points

user_3004015 0
Viewed 80

I am trying to create a complex incremental slide in Rmarkdown using the xaringan with ninjutsu for column formatting. I cannot (to my knowledge) use the standard approaches to incremental slides as elements are changing in multiple places (e.g., more text on the left hand column and an image that changes in the right hand column). Instead, I am recreating the entire slide each time. The problem I am having is that bullet lists change formatting as I go from one bullet point to two (even if I do not have multiple columns). Specifically, the spacing from text to bullets increases when I add a bullet point.

A simple document to reproduce the problem is:

---
title: "Test of bullet alignment"
output:
  xaringan::moon_reader:
    css: ["default", "ninjutsu"]
---

- A test

---

- A test

- B test

After knitting this document, when you go from the 1st to the 2nd slide the spacing from the bullet point to the text changes. This causes a noticeable change in the word wrapping that makes the slide look non-incremental.

Does anyone understand what is going on and have a solution or workaround?

xaringan r-markdown
1 Answers

You have such inconsistent space because you are adding extra space between two bullet points, which leads to wrap the texts A test and B test with paragraph html element p and ninjutsu.css contains the following line for styling the paragraph element.

.content > h1, h2, h3, p { padding-left: 2%;padding-right: 2%; }

So when you are writing a single bullet point, that is not getting wrapped with p but in the next slide when you are writing two bullet points with an extra space between them they are getting wrapped with p and therefore, getting 2% left and right padding. And hence the problem.

But in default xaringan (in default.css) there's no such style rule for paragraph elements in slide content class. That's why, in the base case, there's no such space inconsistency.

Solution

Now a possible solution could be to overwrite the css rule for p elements inside the list elements li and write your own rule for the desired padding (vertical and horizontal), which will work for both the below cases,

- A test

- B test

Or

- A test
- B test

Rmarkdown file

---
title: "Test of bullet alignment"
output:
    xaringan::moon_reader:
      css: ["default", "ninjutsu"]
---


```{css, echo=FALSE}
li p {
display: inline !important;
padding: 0px !important;
}

li {
padding: 6px 3px;
}
```

### This is non tight list (with  space between items)

- A test

---

###This is non tight list (with  space between items)

- A test

- B test

---

### This is tight list (with  no space between items)

- A test

---

### This is tight list (with  no space between items)

- A test
- B test
user_108583210
Related