Incremental Slides Do Not Work with a Two-Column Layout

Incremental slides do not work with a two-column layout

It is a bit of a hack but you could use the template feature of remarkjs coupled with --.

-- tells remarkjs to use the previous slide as a template. In a template you could use {{content}} to tell where to put the next content. If you don't, it is append at the end of the template. it is why -- is used for incremental slide.

As explained in other answer, you cannot use -- inside a .class[] call as it isn't a template then. However, you can use {{content}} inside .class[] so that using -- after will put the next text inside your previous .class[].

It is a bit of a hack because I don't think it will work with complicated incremental logic.

---
title: "Title"
author: "Myself"
date: "`r format(Sys.Date(), '%d.%m.%Y')`"
output:
  xaringan::moon_reader:
    css: ["default"]
    nature:
      highlightStyle: dracula
      highlightLines: true
      countIncrementalSlides: false
---

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
```

.left-column[
  ## Left column title
]
.right-column[
 A whole sentence

+ one `Markdown` bullet point
{{content}}

]

--

+ a second bullet point
{{content}}

--

+ a third bullet point
{{content}}

--

    + a sub level

in the previous exemple, the right column has text appearing incrementally.

Incremental content do not work inside div

Try this:

---
title: "Incremental in Div"
output:
  xaringan::moon_reader:
    encoding: 'UTF-8'
    self_contained: false
    css: ['default', "style.css"]
---

.pull-left-50[
- Point 1

{{content}}

]

--

- Point 2

{{content}}

--

- Point 3 

{{content}}

--

- Point 4

{{content}}

--

- Point 5

--

.pull-right-50[

- Point 6

{{content}}

]

--

- Point 7

{{content}}

--

- Point 8

{{content}}

--

- Point 9

{{content}}

--

- Point 10

Two column incremental beamer slide in RMarkdown

You could do the overlays manually:

---
title: "Presentation Title"
author: "Name"
institute: "Institute"
date: "date"
output:
  beamer_presentation:
    keep_tex: true
    incremental: true
    includes:
      in_header: preamble.tex
theme: "Berlin"
colortheme: "dove"
fonttheme: "structurebold"
classoption: "aspectratio=169"
---

# Section 1

## A vs B
::: columns

:::: column
### A 
\begin{itemize}
\item<1-> Item A1
\item<3-> Item A2
\end{itemize}
::::

:::: column
### B 
\begin{itemize}
\item<2-> Item A1
\item<4-> Item A2
\end{itemize}
::::

:::

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

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

two-column layouts in RStudio presentations/slidify/pandoc

I now have what I think is a reasonable solution that should apply at least to ioslides-based solutions, and maybe (?) to other HTML5-based formats. Starting here, I added

<style>
div#before-column p.forceBreak {
    break-before: column;
}
div#after-column p.forceBreak {
    break-after: column;
}
</style>

to the beginning of my document; then putting <p class="forceBreak"></p> within a slide with {.columns-2} breaks the column at that point, e.g.

## Latin hypercube sampling {.columns-2}

- sample evenly, randomly across (potentially many) uncertain parameters

<p class="forceBreak"></p>

![](LHScrop.png)
[User:Saittam, Wikipedia](https://commons.wikimedia.org/wiki/File:LHSsampling.png#/media/File:LHSsampling.png)

There may be an even better way, but this isn't too painful.

@ChrisMerkord points out in comments that

.forceBreak { -webkit-column-break-after: always; break-after: column; }

worked instead (I haven't tested ...)

---

Related Topics