Column break trick

[remlapmot]

This isn't an issue but I thought I would post in case this is helpful for anyone else.

When using betterport I found that I needed a column break.

I got one by assigning a level 4 header to have a column break before it in my html template by adding the following CSS within the <style> tag:

.section h4 {
    break-before: column;
}

Then in my Rmd file I put a level 4 header #### where I want the column break.

Usually, in RMarkdown three or more asterisks or dashes indicate a horizontal rule or page break, so maybe it would have been better to assign the column break to that; but I didn't know how to do that and this seems to work.

PS. I have put my poster here: https://github.com/remlapmot/mr2019-tom-palmer-poster

[brentthorne]

This is a great idea! I will probably implement it as a css clas to be added to whatever header or r code chunk a user wants. Something like:

.mybreak {
   break-before: column;
}

Then the user just needs to add the class within the .rmd like so:

# First Column

Some text.

# Second Column {.mybreak}

Some more text.

```{r, class.source="mybreak"}
plot(iris$Sepal.Length,
     iris$Sepal.Width,
     col=iris$Species,pch=19)

[remlapmot]

That would be brilliant, thanks.

[brentthorne]

So far I have it working but am not sure how to get the class added to the <img> prduced by the chunk. For example when the chunk option echo=FALSE is set the output image of the iris plot doesn't retain the css class and does not break. Any chance you have ever added a class to a plot like this before? Maybe @RLesur or @yihui know a way :man_shrugging:

[RLesur]

@remlapmot

Usually, in RMarkdown three or more asterisks or dashes indicate a horizontal rule or page break, so maybe it would have been better to assign the column break to that; but I didn't know how to do that and this seems to work.

These asterisks/dashes are transformed to <hr> elements. I think this declaration should do the trick:

hr {
  margin: 0;
  border: none;
  break-before: column;
}

@brentthorne

So far I have it working but am not sure how to get the class added to the <img> prduced by the chunk.

AFAIK, this is not possible. I have two ideas to add a class to the images.

1. Use knitr::hook_plot_html(). This hook adds two classes: rimage on the parent div and plot to the img element.

---
output: html_document
---

```{r setup, include=FALSE}
knitr::knit_hooks$set(plot = knitr::hook_plot_html)
```

2. This kind of plot hook to add a support for the class.output option. This is a draft I wrote quickly for you. I haven't performed a lot of tests:

---
output: html_document
---

```{r setup, include=FALSE}
knitr::knit_hooks$set(plot = function(x, options) {
  res <- knitr::hook_plot_md(x, options)
  if (is.null(options$class.output)) return(res)
  if (grepl('^<img', res)) {
    res <- sub('/>$', sprintf(' class="%s" />', options$class.output), res)
  }
  if (grepl('^!\\[', res)) {
    res <- sub(")", sprintf("){.%s}", options$class.output), res)
  }
  res
})
```

```{r, class.output="mybreak"}
plot(pressure)
```

[brentthorne]

So I tried it and the hook does work and ads the mybreak class to the <img> but I think the issue is that the <img> is wrapped inside of a classless <p> so I think the mybreak class would need to be added to that rather then the <img>, at least I think!

Thanks again for helping out so much @RLesur !

[RLesur]

You're welcome! Maybe the laziest solution could be:

knitr::knit_hooks$set(plot = knitr::hook_plot_html)

and

.rimage {
   break-before: column;
}

[brentthorne]

Tested and works :rocket: ! Thanks so much @RLesur ! I will be implementing this soon to the master branch. It will make poster manipulation much easier! :smile:

And thank you @remlapmot for starting this conversation!

[brentthorne]

After playing around with this more I have realized that the automatic figure numbering is broken when this hook is used as well as inline references, ie @\ref(fig:myfigure) produces ?? in the document.

For now I will suggest that those who wish to have the break occur at begining of a code chunk which also prints out the code on the poster (echo=TRUE) they can add class.source="mybreak" to the code. If echo=FALSE then the can just add the <hr> like @RLesur suggested before (although this is not ideal for using child rmd files to auto generate posters).