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

Question

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?

Answer 1

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