two-column layouts in RStudio presentations/slidify/pandoc - r

Question

I'm trying to come up with a good system for generating slides and accompanying handouts. The ideal system would have the following properties:
beautiful in both presentation (PDF/HTML) and handout (PDF) layouts (handouts should have room for taking notes)
embedded R chunks, figures, other JPG/PNG pictures, etc.
easy to compose
build using command-line tools
bibliography support
pandoc slide separator format (automatically generate a new slide after headers of a specified level) is preferred
I can live with a little bit of additional processing (e.g. via sed), but would prefer not to write a huge infrastructure
two-column layouts: there is a SO post on how to get multi-column slides from pandoc, but it is LaTeX- rather than HTML-oriented.
ability to adjust sizes of embedded images (other than R-generated figures) and column widths on the fly
Here's what I've discovered so far about the various options:
Slidify:
doesn't do pandoc slide separator format, although there is a workaround
the suggestion for creating handouts is to print to PDF; I'd like to leave room for notes etc. (I could probably figure out a way to do that using something like PDFtk or psnup ...)
RStudio presentations (.Rpres files):
does lots of things nicely, including multi-columns with specified widths
doesn't support pandoc slide separator format
I can't figure out what's going on under the hood. There is RStudio documentation that describes the translation process for regular HTML, but it doesn't seem to cover the R presentation format (which isn't quite the same). (I have previously invested some effort in figuring out how to get RStudio-like output via pandoc ...), which means I can't generate slides etc. from the command line.
RStudio's Development Version (as of March 2014) comes bundled with Pandoc and version 2 of rmarkdown. It addresses many of the above issues with the .Rpres format.
pandoc: may be the only markdown-translator that has features such as footnotes, bibliography support, etc.. I can also use pandoc to generate LaTeX using the tufte-handout class, which meets my criteria of beauty.
Unfortunately, it seems not to have built-in two-column format support. Yihui Xie's HTML5 example doesn't show any two-column examples, and it claims (on slide 5) that clicking the "Knit HTML" button in RStudio is equivalent to pandoc -s -S -i -t dzslides --mathjax knitr-slides.md -o knitr-slides.html, but it doesn't seem to be ...
LaTeX/beamer: I could simply compose in Rnw (knitr-dialect Sweave) rather than R markdown to begin with. This would give me ultimate flexibility ...
despite many years of LaTeX use I do find LaTeX composition more of a pain than markdown composition.
After all that, my specific question is: what's the best (easiest) way to generate a two-column layout for HTML output?
Any other advice will also be appreciated.

Answer 1

This is an old Q, but I was recently plagued by a similar question, here's what I found:
Using the RPres format, two columns can be specified like so (details). Note that RPres can only be converted to HTML by clicking a button in RStudio, there doesn't seem to be any command line method, which is a bit annoying. Despite, that I'd say it is currently the simplest and most flexible method for getting slide columns with markdown:
===
Two Column Layout
===
This slide has two columns
***
```{r, echo=FALSE}
plot(cars)
```
Some flexibility is afforded by adjusting the column proportions:
===
Two Column Layout
===
left: 30%
This slide has two columns
***
```{r, echo=FALSE}
plot(cars)
```
With rmarkdown we can get two columns, but with no control over where the break is, which is a bit of a problem:
---
output: ioslides_presentation
---
## Two Column Layout {.columns-2}
This slide has two columns
```{r, echo=FALSE}
plot(cars)
```
We can also mix markdown and LaTeX in an Rmd file using the beamer_presentation format in RStudio to get two columns like this, but can't run any code in either column, which is a limitation:
---
output: beamer_presentation
---
Two Column Layout
-------
\begin{columns}
\begin{column}{0.48\textwidth}
This slide has two columns
\end{column}
\begin{column}{0.48\textwidth}
If I put any code in here I get an error, see
https://support.rstudio.com/hc/communities/public/questions/202717656-Can-we-have-columns-in-rmarkdown-beamer-presentations-
\end{column}
\end{columns}
Seems like a regular Rnw LaTeX doc is the best way to get columns if you want to use LaTex, not this markdown hybrid (cf. two column beamer/sweave slide with grid graphic)
In all of the above an image can be placed in an column.
The slidify website has instructions on making two columns here: http://slidify.org/customize.html but it's not clear what has to go into the assets/layouts folder to make it work

Answer 2

You can use fenced_divs notation or ::: to create columns or `Two Content layout'. See also this page to know more about the notation.
## Slide With Image Left
::: columns
:::: column
left
::::
:::: column
right
```{r your-chunk-name, echo=FALSE, fig.cap="your-caption-name"}
knitr::include_graphics("your/figure/path/to/the-image.pdf")
#The figure will appear on the right side of the slide...
```
::::
:::
Since pandoc 2+, which supports the notation, was implemented in RStudio v1.2+, you may need to install RStudio v1.2+ first. The installation is easy enough (at least in my case); just download and install RStudio v1.2+. In the way of installation, the former version of RStudio on your computer will be replaced with the new one without uninstalling it manually.
The ::: notation can be used even when you knit .Rmd files with beamer_presentation option, as well as when you create HTML slides. So we don't have to neither mix markdown and LaTeX notation in one file, nor add additional codes any longer: just knit the file as you knit other .Rmd with other options.

Answer 3

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 ...)

Answer 4

I got an idea from HERE, the basic solutions was:
### Function *inner_join*
. . .
`<div style="float: left; width: 50%;">`
``` {r, echo = FALSE, results = 'markup', eval = TRUE}
kable(cbind(A,B))
```
`</div>`
`<div style="float: right; width: 50%;">`
```{r, echo = TRUE, results = 'markup', eval = TRUE}
inner_join(A,B, by="C")
```
`</div>`

Answer 5

There is a workaround for beamer error.
In short: Error is related to pandoc conversion engine, which treats everything between \begin{...} and \end{...} as TeX. It can be avoided by giving new definition for begin{column} and end{column} in yaml header.
Create mystyle.tex and write there:
\def\begincols{\begin{columns}}
\def\begincol{\begin{column}}
\def\endcol{\end{column}}
\def\endcols{\end{columns}}
In the Rmd file use these new definitions
---
output:
beamer_presentation:
includes:
in_header: mystyle.tex
---
Two Column Layout
-------
\begincols
\begincol{.48\textwidth}
This slide has two columns.
\endcol
\begincol{.48\textwidth}
```{r}
#No error here i can run any r code
plot(cars)
```
\endcol
\endcols
And you get:

Answer 6

So far I haven't been able to do better than hacking my own little bit of markup on top of the rmd format: I call my source file rmd0 and run a script including this sed tidbit to translate it to rmd before calling knit:
sed -e 's/BEGIN2COLS\(.*\)/<table><tr><td style="vertical-align:top; width=50%" \1>/' \
-e 's/SWITCH2COLS/<\/td><td style="vertical-align:top">/' \
-e 's/END2COLS/<\/td><\/tr><\/table>/' ...
There are a few reasons I don't like this. (1) It's ugly and special-purpose, and I don't have a particularly good way to allow optional arguments (e.g. relative widths of columns, alignment, etc.). (2) It has to be tweaked for each output format (e.g. if I wanted LaTeX/beamer output I would need to substitute \begin{columns}\begin{column}{5cm} ... \end{column}\begin{column}{5cm} ... \end{column}\end{columns} instead (as it turns out I want to ignore the two-column formatting when I make LaTeX-format handouts, so it's a little easier, but it's still ugly).
Slidify may yet be the answer.

Answer 7

Not a direct solution, but Yihui's Xaringan package https://github.com/yihui/xaringan/ works for me. It's based on remark.js. In the default template, you can use .pull-left[] and .pull-right[] . Example: https://slides.yihui.name/xaringan/#15. You only need a minimum tweak on the existing .rmd files.