Allow Plots To Overhang Chunk Text In Rmarkdown Html

I'm preparing some html pages using rmarkdown, intended for posting online. When showing plots, I'd like to take advantage of more of the width available on a typical computer moni

Solution 1:

As you have realized, you should not increase the width of .main-container, but the images instead. Below is one way to achieve it:

---title:"R Markdown Full-width Figures"output:html_document---
```{rout.extra='style="max-width:none;width:100vw;margin-left:calc(50%-50vw);"',fig.width=12,fig.height=3,device="svg"}par(mar=c(4,4.5,1,.5))plot(pressure)```

First, you need to remove the default max-width constraint (which is imposed by rmarkdown) by max-width: none;. Then you set the width of the image to be 100vw, which means the full width of the window. At this point, your image is still left-aligned inside .main-container, i.e., it's left side is aligned with the rest of the body elements, so you need to move the image to the left so that it touches the left margin of the window, which is what margin-left: calc(50% - 50vw) does above. You may draw a box on a piece of paper to understand it. Basically, margin-left: 50% means that the image will first be moved to the right by half of the width of its container (i.e., .main-container). This means its left side is at the center of the container. Since the container is centered on the page, you need to move the image to the left by 50vw (i.e., half of the window width). Moving to the left means giving it a negative left margin, hence -50vw. The calc() function calculates the actual number of pixels dynamically, so you don't have to assume a fixed width for the container.

Once you understand this margin-left trick, you can use other possible widths, e.g., width: 90vw; margin-left: calc(50% - 45vw), which gives you an image with the width 90vw and centered on the page:

If you do not want to inline the CSS on <img>, you can wrap the code chunk in a fenced Div with a class name, so that you can reuse the CSS defined for the class. Here is an example:

---title:"R Markdown Full-width Figures"output:html_document---
```{css,echo=FALSE}.fullwidthimg {
  max-width:none;width:100vw;margin-left:calc(50%-50vw);
}
```## One plot::: {.fullwidth}
```{r,fig.width=12,fig.height=3,device="svg"}par(mar=c(4,4.5,1,.5))plot(pressure)```:::## Another plot::: {.fullwidth}
```{r,fig.width=12,fig.height=5,device="svg"}par(mar=c(4,4.5,1,.5))boxplot(mpg~gear,data=mtcars,horizontal=TRUE)```:::