Wrapping text around a right-floated image in RMarkdown document.

[howardm19]

I'm trying to wrap text around a right-floated image. It will be a page on a Distill website. I'm working in RStudio.

Here is the text:

Vivamus venenatis egestas eros ut tempus. Vivamus id est nisi. Aliquam molestie erat et sollicitudin venenatis. In ac lacus at velit scelerisque mattis.

Vivamus venenatis egestas eros ut tempus. Vivamus id est nisi. Aliquam molestie erat et sollicitudin venenatis. In ac lacus at velit scelerisque mattis.

```{r out.width='30%', out.extra='style="float:right; padding:10px"'}
knitr::include_graphics("images/CXR.jpg")
```

Vivamus venenatis egestas eros ut tempus. Vivamus id est nisi. Aliquam molestie erat et sollicitudin venenatis. In ac lacus at velit scelerisque mattis.

This is the resultant image:

---

The text is obviously not wrapping.

How do I achieve this ?

Thanks!

Howard

[cderv]

@howardm19

It will be a page on a Distill website.

I believe this is a specificity of the distill framework. You need to customize further the CSS.
If you look at the source of the HTML page, you'll see that the image and the following paragraph are not in the same div. Which impact the way the float works. If you use html_document your CSS should work for example. This is because of the special features for figures:

Distill for R Markdown: Figure Layout

It seems that adding a div for your text and your figure will get you the expected result. You can add a div using Pandoc fenced div feature for custom block, useful for customizing a document

9.6 Custom blocks (*) | R Markdown Cookbook

---
title: test
output: 
  distill::distill_article: default
--- 

Vivamus venenatis egestas eros ut tempus. Vivamus id est nisi. Aliquam molestie erat et sollicitudin venenatis. In ac lacus at velit scelerisque mattis.

Vivamus venenatis egestas eros ut tempus. Vivamus id est nisi. Aliquam molestie erat et sollicitudin venenatis. In ac lacus at velit scelerisque mattis.

::: {.floatting}

```{r out.width='30%', out.extra='style="float:right; padding:10px"'}
knitr::include_graphics("Rlogo.svg")
```

Vivamus venenatis egestas eros ut tempus. Vivamus id est nisi. Aliquam molestie erat et sollicitudin venenatis. In ac lacus at velit scelerisque mattis.
:::

You can further customize looking at more precise CSS for this kind of task.

Hope it helps

[howardm19]

@cderv

That works.

Thanks so much!

Howard

[cderv]

If your question's been answered (even by you!), would you mind choosing a solution? It helps other people see which questions still need help, or find solutions if they have similar problems. Here’s how to do it:

FAQ: How do I mark a solution?

If your question has been answered, don't forget to mark the solution! How do I mark a solution? Find the reply you want to mark as the solution and look for the row of small gray icons at the bottom of that reply. Click the one that looks like a box with a checkmark in it: [image] Hovering over the mark solution button shows the label, "Select if this reply solves the problem". If you don't see the mark solution button, try clicking the three dots button ( ••• ) to expand the full set of options. When a solution is chosen, the icon turns green and the hover label changes to: "Unselect if this reply no longer solves the problem". Success! [solution_reply_author] …