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/

Pupiparous

We need to see your markup to tell why the CSS isn't working. – Involucre

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.

Plait

Thanks, that's a real step forward! But I have one question: How would it look for the third bullet point? I can see that it works with the second one, but how to go one more? – Pupiparous

You continue with the same mechanism. I edited the answer with an example – Plait

Nice. Thanks a lot. It doesn't work I guess for more complicated things like when you have subsequent bulletpoints one level more to the right (this seems not to be respected, all points stay on the same level), but I mark it as answered because of the effort and because I do not think there will be an easy patch for all circumstances...! – Pupiparous

it could work with sub level too, but could be difficult to follow at the end in the code because you need to take care of space and line break. I edited the answer. By the way, you accepted the other answer not this one... – Plait

Uuups...changed that! :-) – Pupiparous

I think it really works only in that specific example... if I'd like incremental bullets point in the left column it does not work that well, even though it is an interesting hack. – Brachyuran

Answer 2

You cannot incrementally show incomplete elements using two dashes --. When you split paragraphs or lists using --, the subset will still be complete and valid elements. For example,

- One
- Two
--
- Three

The items - One and - Two still form a complete and valid list. However, when you split a column like .left-column[]:

.left-column[
One paragraph.

--

Another paragraph.
]

The subsets are no longer valid Markdown: neither

.left-column[
One paragraph.

nor

Another paragraph.
]

is valid Markdown, hence they cannot be rendered. Basically when you build incremental slides using --, you have to ask yourself if all text up to this point is valid Markdown.

In your case, you have to manually repeat certain elements to build incremental slides, which is certainly not efficient, but that is the only way to go. If you study the source of https://remarkjs.com, you will see the author of remark.js did exactly that, e.g.,

---
layout: false
.left-column[
  ## What is it?
]
.right-column[
  A simple, in-browser, Markdown-driven slideshow tool targeted at people who know their way around HTML and CSS, featuring:

- Markdown formatting, with smart extensions

....
]

---
.left-column[
  ## What is it?
  ## Why use it?
]
.right-column[
If your ideal slideshow creation workflow contains any of the following steps:

- Just write what's on your mind

....
]

---
.left-column[
  ## What is it?
  ## Why use it?
]
.right-column[
As the slideshow is expressed using Markdown, you may:

- Focus on the content, expressing yourself in next to plain text not worrying what flashy graphics and disturbing effects to put where

....
]

So if even the author of remark.js does not have the magic in this case, I guess there isn't a clever solution to your problem.

Kassandra