Incremental slides do not work with a two-column layout

Question

I am using the xaringan package for r for a presentation:

https://cran.r-project.org/web/packages/xaringan/index.html

which builds upon the remark.js library.

I would like to use a two column layout, i.e. something like this from the original remark.js teaser presentation:

https://remarkjs.com/

where the original css rules (which are embedded in the source of the presentation) specifies the layout via:

/* Two-column layout */
.left-column {
  color: #777;
  width: 20%;
  height: 92%;
  float: left;
}
.left-column h2:last-of-type, .left-column h3:last-child {
  color: #000;
}
.right-column {
  width: 75%;
  float: right;
  padding-top: 1em;
}

The problem is that when you use -- in one of the columns, it does not work as expected - it should trigger an incremental slide...

This does work, bullet points are displayed incrementally:

# Slide 1
- hello
--
- again

---
# Slide 2
- and one
--
- more

But within a column it does not work:

.left-column[
# Column 1
- hello
--
- again]

.right-column[
# Column 2
- and one
--
- more]

Next to that, in the original remark.js css specification, the right column is additionally divided by

.pull-left {
  float: left;
  width: 47%;
}
.pull-right {
  float: right;
  width: 47%;
}
.pull-right ~ p {
  clear: both;
}

And again, the -- does not work anymore, neither with incremental steps within the .pull-right/.pull-left classes nor "between" them, i.e. to display the .pull-left part first, than the .pull-right part. These problems do arise within the original remark.js and therefore also in the xaringan package.

After all, it would be great to have at least incremental slides within the right column. Does anyone have any idea how to fix this? How can I modify the css to accomplish this?

Edit:

The whole markup within xaringan, i.e. as written in rmarkdown in Rstudio and then "knitted" is:

---
title: "Title"
author: "Myself"
date: "`r format(Sys.Date(), '%d.%m.%Y')`"
output:
  xaringan::moon_reader:
    css: ["default", "custom.css"]
    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

--

- a second bullet point
]

Within the file custom.css there is only the left and right column classes nothing else, and these are copied from the teaser presentation from https://remarkjs.com/

Answer 1

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.