Figures wrapped in text have an unexpected caption placement when knitting to .html

[oolonek]

What is the issue

I would like to display a figure wrapped in text. I want this figure to have a caption and be cross-referenced. I want the rmarkdown file to be knitted both to html and pdf.
After browsing SO and googling I have not find a complete answer to my question.
My attempt to proceed is as follows.

---
title: 'Wrapped figures'
date: "`r format(Sys.time(), '%d %B, %Y')`"
output:
  bookdown::html_document2:
    df_print: paged
    toc: TRUE
    toc_float: TRUE
    toc_depth: 4
    code_download: TRUE
    code_folding: hide
    fig_caption: yes
    number_sections: yes
    global_numbering: true
  bookdown::pdf_document2:
    toc: no
    # toc_depth: 2
    fig_caption: yes
    number_sections: true
    keep_tex: yes
    latex_engine: lualatex
latex_engine: lualatex
header-includes:
- \usepackage{wrapfig}
---

```{r message=FALSE, warning=FALSE, echo=FALSE}
library(knitr)
library(rmarkdown)
```
# Example 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

```{r wrapped-figure, fig.cap="A wrapped figure", echo=FALSE, out.width="65%", out.extra='style="float:right; padding:10px"', results='asis'}
# Define figure variables
fig_path <- "wikidata.png"
fig_caption <- "A wrapped figure"
fig_ref <- "wrapped-figure"

# Output-specific logic for the figure
if (knitr::is_latex_output()) {
  cat(sprintf("\\begin{wrapfigure}{R}{.5\\textwidth}
\\begin{center}
\\includegraphics[width=.5\\textwidth]{%s}
\\caption{%s \\label{fig:%s}}
\\end{center}
\\end{wrapfigure}
", fig_path, fig_caption, fig_ref))
}
if (knitr::is_html_output()) {
  knitr::include_graphics(fig_path)
}
```

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? See Figure \@ref(fig:wrapped-figure).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

If the pdf knits as expected (the figure is wrapped in text, cross-referenced and caption is correctly placed) see screen shot :

This is not the case in the html output (here the figure is wrapped in text, cross-referenced but the caption is placed on the top and not even on top of the figure but rather on top of the neighboring text.) see screenshot.

I do not understand how to resolve this. Any help is welcome !

Checklist

• formatted your issue so it is easier for us to read?

• included a minimal, self-contained, and reproducible example?

Code is pasted above. Picture used is

• pasted the output from xfun::session_info('bookdown') in your issue?

r$> xfun::session_info('bookdown')
R version 4.2.2 (2022-10-31)
Platform: x86_64-apple-darwin17.0 (64-bit)
Running under: macOS Big Sur ... 10.16, RStudio 0

Locale: en_US.UTF-8 / en_US.UTF-8 / en_US.UTF-8 / C / en_US.UTF-8 / en_US.UTF-8

Package version:
  base64enc_0.1.3   bookdown_0.41     bslib_0.5.1       cachem_1.0.8      digest_0.6.33     evaluate_1.0.1    fastmap_1.1.1     fontawesome_0.5.3 fs_1.6.3          graphics_4.2.2    grDevices_4.2.2   highr_0.11        htmltools_0.5.8.1
  jquerylib_0.1.4   jsonlite_1.8.9    knitr_1.49        memoise_2.0.1     methods_4.2.2     mime_0.12         R6_2.5.1          rappdirs_0.3.3    rlang_1.1.4       rmarkdown_2.29    sass_0.4.7        stats_4.2.2       tinytex_0.54     
  tools_4.2.2       utils_4.2.2       xfun_0.49         yaml_2.3.10      

• upgraded all your packages to their latest versions (including your versions of R, the RStudio IDE, and relevant R packages)?

Yes, through update.packages(ask = FALSE, checkBuilt = TRUE)

• installed and tested your bug with the development version of the bookdown package using remotes::install_github("rstudio/bookdown") ?

No.

[cderv]

If you look at the HTML produced, you'll see this is something like this

<div class="figure"><span style="display:block;" id="fig:wrapped-figure"></span>
<img role="img" aria-label="A wrapped figure" src="<truncated>" alt="A wrapped figure" width="65%" style="float:right; padding:10px">
<p class="caption">
Figure 1: A wrapped figure
</p>
</div>

So the out.extra you passed on the cell are only applied to the <img> and so no the caption.

You need to try other way to apply floating for img and its caption p.caption that works with this HTML structure.

Among ideas

• out.extra='class="wrapped"' can be used to add a class to the image
• Wrapping your whole cell in

::: {.wrapped}
...
:::

can help you add a div around the div.figure

Hope it helps understand why you have this results right now, and give you ideas for solving it.