Float graphic figure and caption around text in rmarkdown for hmtl output

Question

I am trying to build an html report using knitr where there is text description with some figures mixed in. If possible, I would like to be able to float a figure to the side and have text in the unused space. I am part of the way there, but my problem is that the figure caption is now dissociated from the figure itself. See image below for example. Here is reproducible code:

---
title: "caption_testing"
author: "Me"
date: "6/23/2021"
output: html_document
---

    ```{r setup, include=FALSE}
    knitr::opts_chunk$set(echo = TRUE)
    ```
Est pellentesque elit ullamcorper dignissim cras. Turpis egestas maecenas pharetra convallis posuere. Iaculis urna id volutpat lacus laoreet. Id volutpat lacus laoreet non. Vulputate dignissim suspendisse in est ante in. Elit eget gravida cum sociis natoque penatibus. Bibendum at varius vel pharetra vel turpis

### An uninteresting heading that spans the width of the page.

    ```{r echo=FALSE, fig.cap="**Figure 1**. This figure caption to ideally be placed underneath the figure where it will have many words and explain great things. As a bonus, the caption margins will match up with that of the figure.", out.width='60%', out.extra='style="float:right; padding:10px"', fig.align='right'}
    knitr::include_graphics('darwinBubble.png')
    ```
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel eros donec ac odio tempor orci dapibus ultrices in. Auctor augue mauris augue neque. Ornare arcu odio ut sem nulla pharetra diam. Enim blandit volutpat maecenas volutpat. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Mi ipsum faucibus vitae aliquet nec ullamcorper. Cursus euismod quis viverra nibh cras pulvinar. Eget nunc scelerisque viverra mauris. Pharetra convallis posuere morbi leo. Elit scelerisque mauris pellentesque pulvinar pellentesque.

Semper risus in hendrerit gravida rutrum quisque non tellus. Massa vitae tortor condimentum lacinia quis vel eros donec. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Nec ultrices dui sapien eget mi proin sed libero. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Ultrices mi tempus imperdiet nulla. Magna ac placerat vestibulum lectus mauris ultrices. Amet dictum sit amet justo donec enim diam. Neque viverra justo nec ultrices dui sapien. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Id velit ut tortor pretium viverra suspendisse potenti nullam ac.

Here is that same r chunk, but with only the essentials. I don't believe fig.align is doing any or much of the work here, but I got the idea to use out.extra from another SO post that I cannot find right now.

{r echo=FALSE, fig.cap="caption", out.width='60%', out.extra='style="float:right; padding:10px"', fig.align='right'}
knitr::include_graphics('darwinBubble.png')

And here is what this produces for me.

Thanks in advance, any help appreciated!

Radovan Miletić · Accepted Answer · 2021-06-24T16:06:22.060

The logic of the following CSS trick is explained here.

We can format the figure as a table (with image as it only cell) and the paragraph (where the figure caption live) as a table caption and place it on the bottom (or top).

Note: I needed to crop your darwinBubble.png image, hence out.width='100%'. Paddings are optional.

---
title: "caption_testing"
author: "Me"
date: "6/23/2021"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

```{css float-figure-caption, echo = FALSE}
div.figure {
  display: table;
  float: right;
  padding-left: 30px;
  padding-bottom: 10px;
}
div.figure p {
  display: table-caption;
  caption-side: bottom;
  padding-left: 30px;
}
```

Est pellentesque elit ullamcorper dignissim cras. Turpis egestas maecenas pharetra convallis posuere. Iaculis urna id volutpat lacus laoreet. Id volutpat lacus laoreet non. Vulputate dignissim suspendisse in est ante in. Elit eget gravida cum sociis natoque penatibus. Bibendum at varius vel pharetra vel turpis

### An uninteresting heading that spans the width of the page.

```{r echo=FALSE, fig.cap="**Figure 1**. This figure caption to ideally be placed underneath the figure where it will have many words and explain great things. As a bonus, the caption margins will match up with that of the figure.", out.width='100%', fig.align='right'}
knitr::include_graphics('darwinBubble.png')
```

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel eros donec ac odio tempor orci dapibus ultrices in. Auctor augue mauris augue neque. Ornare arcu odio ut sem nulla pharetra diam. Enim blandit volutpat maecenas volutpat. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Mi ipsum faucibus vitae aliquet nec ullamcorper. Cursus euismod quis viverra nibh cras pulvinar. Eget nunc scelerisque viverra mauris. Pharetra convallis posuere morbi leo. Elit scelerisque mauris pellentesque pulvinar pellentesque.

Semper risus in hendrerit gravida rutrum quisque non tellus. Massa vitae tortor condimentum lacinia quis vel eros donec. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Nec ultrices dui sapien eget mi proin sed libero. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Ultrices mi tempus imperdiet nulla. Magna ac placerat vestibulum lectus mauris ultrices. Amet dictum sit amet justo donec enim diam. Neque viverra justo nec ultrices dui sapien. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Id velit ut tortor pretium viverra suspendisse potenti nullam ac.  

Semper risus in hendrerit gravida rutrum quisque non tellus. Massa vitae tortor condimentum lacinia quis vel eros donec. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Nec ultrices dui sapien eget mi proin sed libero. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Ultrices mi tempus imperdiet nulla. Magna ac placerat vestibulum lectus mauris ultrices. Amet dictum sit amet justo donec enim diam. Neque viverra justo nec ultrices dui sapien. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Id velit ut tortor pretium viverra suspendisse potenti nullam ac.

Output:

EDIT

Could CSS classes be used to specify only certain chunks...?

I hope someone will provide better solution than the following hack, where we wrap the whole chunk in <div>.

---
title: "caption_testing"
author: "Me"
date: "6/23/2021"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

```{css float-right-figure-caption, echo = FALSE}
.my-right-figure {
  display: table;
  float: right;
  padding-left: 30px;
  padding-bottom: 10px;
}
.my-right-figure p {
  display: table-caption;
  caption-side: bottom;
  padding-left: 30px
}
.figure {
  display: contents;
}
```

```{css float-left-figure-caption, echo = FALSE}
.my-left-figure {
  display: table;
  float: left;
  padding-right: 30px;
  padding-bottom: 10px;
}
.my-left-figure p {
  display: table-caption;
  caption-side: bottom;
  padding-right: 30px
}
.figure {
  display: contents;
}
```

Est pellentesque elit ullamcorper dignissim cras. Turpis egestas maecenas pharetra convallis posuere. Iaculis urna id volutpat lacus laoreet. Id volutpat lacus laoreet non. Vulputate dignissim suspendisse in est ante in. Elit eget gravida cum sociis natoque penatibus. Bibendum at varius vel pharetra vel turpis

### An uninteresting heading that spans the width of the page.

<div class="my-right-figure">
```{r echo=FALSE, fig.cap="**Figure 1**. This figure caption to ideally be placed underneath the figure where it will have many words and explain great things. As a bonus, the caption margins will match up with that of the figure.", out.width='100%', fig.align='right'}
knitr::include_graphics('darwinBubble.png')
```
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel eros donec ac odio tempor orci dapibus ultrices in. Auctor augue mauris augue neque. Ornare arcu odio ut sem nulla pharetra diam. Enim blandit volutpat maecenas volutpat. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Mi ipsum faucibus vitae aliquet nec ullamcorper. Cursus euismod quis viverra nibh cras pulvinar. Eget nunc scelerisque viverra mauris. Pharetra convallis posuere morbi leo. Elit scelerisque mauris pellentesque pulvinar pellentesque.

Semper risus in hendrerit gravida rutrum quisque non tellus. Massa vitae tortor condimentum lacinia quis vel eros donec. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Nec ultrices dui sapien eget mi proin sed libero. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Ultrices mi tempus imperdiet nulla. Magna ac placerat vestibulum lectus mauris ultrices. Amet dictum sit amet justo donec enim diam. Neque viverra justo nec ultrices dui sapien. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Id velit ut tortor pretium viverra suspendisse potenti nullam ac.  

Semper risus in hendrerit gravida rutrum quisque non tellus. Massa vitae tortor condimentum lacinia quis vel eros donec. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Nec ultrices dui sapien eget mi proin sed libero. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Ultrices mi tempus imperdiet nulla. Magna ac placerat vestibulum lectus mauris ultrices. Amet dictum sit amet justo donec enim diam. Neque viverra justo nec ultrices dui sapien. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Id velit ut tortor pretium viverra suspendisse potenti nullam ac.

<div class="my-left-figure">
```{r echo=FALSE, fig.cap="**Figure 2**. This figure caption to ideally be placed underneath the figure where it will have many words and explain great things. As a bonus, the caption margins will match up with that of the figure.", out.width='100%', fig.align='left'}
knitr::include_graphics('darwinBubble.png')
```
</div>

Semper risus in hendrerit gravida rutrum quisque non tellus. Massa vitae tortor condimentum lacinia quis vel eros donec. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Nec ultrices dui sapien eget mi proin sed libero. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Ultrices mi tempus imperdiet nulla. Magna ac placerat vestibulum lectus mauris ultrices. Amet dictum sit amet justo donec enim diam. Neque viverra justo nec ultrices dui sapien. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Id velit ut tortor pretium viverra suspendisse potenti nullam ac.  

Semper risus in hendrerit gravida rutrum quisque non tellus. Massa vitae tortor condimentum lacinia quis vel eros donec. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Nec ultrices dui sapien eget mi proin sed libero. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Ultrices mi tempus imperdiet nulla. Magna ac placerat vestibulum lectus mauris ultrices. Amet dictum sit amet justo donec enim diam. Neque viverra justo nec ultrices dui sapien. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Id velit ut tortor pretium viverra suspendisse potenti nullam ac.

Semper risus in hendrerit gravida rutrum quisque non tellus. Massa vitae tortor condimentum lacinia quis vel eros donec. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Nec ultrices dui sapien eget mi proin sed libero. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Ultrices mi tempus imperdiet nulla. Magna ac placerat vestibulum lectus mauris ultrices. Amet dictum sit amet justo donec enim diam. Neque viverra justo nec ultrices dui sapien. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Id velit ut tortor pretium viverra suspendisse potenti nullam ac.

Output:

Also we

can wrap the code chunk in a fenced Div with a class name, so that you can reuse the CSS defined for the class.

See @Yihui's SO answer here.

::: {.my-right-figure}
```{r echo=FALSE, fig.cap="**Figure 1**. This figure caption to ideally be placed underneath the figure where it will have many words and explain great things. As a bonus, the caption margins will match up with that of the figure.", out.width='100%', fig.align='right'}
knitr::include_graphics('darwinBubble.png')
```
:::

::: {.my-left-figure}
```{r echo=FALSE, fig.cap="**Figure 2**. This figure caption to ideally be placed underneath the figure where it will have many words and explain great things. As a bonus, the caption margins will match up with that of the figure.", out.width='100%', fig.align='left'}
knitr::include_graphics('darwinBubble.png')
```
:::

Yes this worked great! One followup question, that css chunk then applies that style to rest of the document right? I've been reading through Yihui's cookbook and came across this bit about CSS classes (https://bookdown.org/yihui/rmarkdown-cookbook/chunk-styling.html). Could CSS classes be used to specify only certain chunks to apply this solution to? Apologies, I'm a bit of a novice with HTML and CSS. — cdtip, Jun 24 '21 at 02:32
I think you could specify the CCS to specific divs, not necessarily R chunks tho — Daniel_j_iii, Jun 24 '21 at 12:44
@cdtip I did try those chunk options `class.source` and `class.output` but didn't work, maybe I am missing something... — Radovan Miletić, Jun 24 '21 at 15:27
Thank you both, and apologies for my delayed response. So far this solution seems to work perfectly for my purposes. I applied the code in your edit to my rmd file and it worked without much change. For some odd reason however, I needed to have `p + p` instead of just `p` in the css chunk for it work. The other minor issue was that width proportion sizing needed to be applied in the css chunk and not the r chunk (which is not really an issue, more of just documenting for anyone else who reads). I'll post my full code that worked for me in an edit when I get another minute. — cdtip, Jun 28 '21 at 18:14

score 0 · Answer 2 · answered Jun 23 '21 at 22:23

An alternative I found, was using the Tufte Rmarkdown template, you may be able to recreate it, but Tufte format already has that type of document layout, I made the Figure caption longer to try and replicate your length. Tufte chapter

The code I used was trying to only showcase that the figure staying attached to the image was possible with The Tufte format

---
title: "An Example Using the Tufte Style"
author: "John Smith"
output:
  tufte::tufte_html: default
---

```{r setup, include=FALSE}
library(tufte)
# invalidate cache when the tufte version changes
knitr::opts_chunk$set(cache.extra = packageVersion('tufte'))
options(htmltools.dir.version = FALSE)
```

```{r fig-margin, fig.margin = TRUE, fig.cap = "MPG vs horsepower, colored by     transmission.MPG vs horsepower, colored by transmission.MPG vs horsepower,     colored by transmission.MPG vs horsepower, colored by transmission.",     fig.width=3.5, fig.height=3.5, cache=TRUE, message=FALSE}
library(ggplot2)
mtcars2 <- mtcars
mtcars2$am <- factor(
  mtcars$am, labels = c('automatic', 'manual')
)
ggplot(mtcars2, aes(hp, mpg, color = am)) +
  geom_point() + geom_smooth() +
  theme(legend.position = 'bottom')
```

Float graphic figure and caption around text in rmarkdown for hmtl output

2 Answers2

Linked

Related