How to wrap text around a figure?

[vogtr19]

Description

Hi! I've spent more time than I'd like to admit today trying to get text to wrap around a .jpg image in a .qmd file as part of a book format. The only relevant item I've seen in dozens of google searches has been: https://forum.posit.co/t/picture-and-text-side-by-side-on-quarto/147682 but I haven't been able to get this to run in a .qmd. It just prints out the text verbatim from source. I understand there's a css float function but I'm not sure how to apply this to a single image and text paragraph at a time.

I have tried multiple ways with no success.

I can get somewhat close with multi-column or custom layout (like below) but it looks very clunky with a large gap in one column.

::: {layout="[2,1]"}
Five sentence long text paragraph.

{#fig-sample}
:::

Any help would be most welcome. Thanks,
Ryan

Quarto Version: 1.5.56
OS: Windows 11

[cderv]

to get text to wrap around a .jpg image in a .qmd file as part of a book format.

Do you have an example of what output you are targeting ?

I understand there's a css float function but I'm not sure how to apply this to a single image and text paragraph at a time.

Float in CSS would help indeed. You can search the web for how to do it, and then use raw HTML or associated .md syntax.

For example :

---
title: "Untitled"
format: html
---

## Test

::: {.img-float}
![]({{< placeholder 200 >}}){style="float: left; margin: 5px;"}
:::

{{< lipsum 2 >}}

You can adapt by using classes and a CSS style (or quarto scss theme addition).

This will only work for HTML though.

Hope it helps

[vogtr19]

Yes, I've seen the LaTeX / PDF links. My goal here for now is HTML output - I can work on the .tex file later.

cderv, the placeholder example above works perfectly, but I'm struggling to adapt that to my case where it pulls a larger 1200px image and I'd like to specify a width=300 along with the style but I'm terrible at mixing in css here. {style="float: right; margin: 5px;", width=300} doesn't work. I also tried using a smaller image and can't get it to float. In the second group in md code below I tried using exactly the code from your example, but added a caption like shown and it doesn't work.

### Reformation History

::: {.img-float}
![First page of 1517 Basel printing of Martin Luther's 95 theses as a pamphlet, written in Latin. Martin Luther, Public domain, via Wikimedia Commons](https://upload.wikimedia.org/wikipedia/commons/7/79/Ninety-five_Theses_%28Basel%29.jpg){style="float: right; margin: 5px;"}
:::

{{< lipsum 2 >}}

or

::: {.img-float}
![First page of 1517 Basel printing of Martin Luther's 95 theses as a pamphlet, written in Latin. Martin Luther, Public domain, via Wikimedia Commons]({{< placeholder 200 >}}){style="float: left; margin: 5px;"}
:::

{{< lipsum 2 >}}

[cderv]

This is to show CSS can help here - but the specific needs to be adapted. Probably using CSS rules instead inline style will be easier. I'll try out with your examples. This is all HTML + CSS and the right combination needs to be found.

[vogtr19]

Understood. My remaining concern here is that it looks like adding a caption breaks the float property - I'm wondering if there is any solution for that.

Thanks so much for both of your quick replies!

[mcanouil]

The best way to figure out HTML/CSS is to use your favourite browser inspect/developer mode.

as explained by Christophe float property is the solution with or without caption, since we cannot cover all the cases, you have to adapt yourself the suggested solution.

---
title: "Quarto Playground"
format: html
---

This is a playground for Quarto.

::: {style="float: left; margin: 5px;"}
![An image]({{< placeholder 200 >}}){#fig-placeholder}
:::

{{< lipsum 1 >}}

[DrOncogene]

how can I wrap the text around computationally generated tables? This is the code cell producing the table:

#| label: tbl-hair-cleaned
#| tbl-cap: Wrangled Hair growth data
#| tbl-pos: h

hair_cleaned = wrangle_data(hair.copy(deep=True))
hair_cleaned.head()

The table has only 3 columns. The output is in pdf and I want to let it hug the left margin so text can flow to its right. Thanks in advance.

[cderv]

@DrOncogene do you know how you would do it in LaTeX ? This is LaTeX styling here - previous answer was for HTML styling. So we need to see how to do it in LaTeX, and then see if there is correct configuration field in Quarto. Otherwise you could try putting the text and table in a two columns layout maybe 🤷

BTW it would be better to open a new thread below this one for clarity instead of continuing this answered thread in this discussion.

Github discussion allows different threads for same Discussion and this should be leveraged more for clarity IMO.

[mcanouil]

I'm pretty sure there are already few discussions about this or at least related discussion for LaTeX/PDF:

• Group of figures and tables in twocolumn layout #4399