允许图在 rmarkdown html 中突出块文本 [英] allow plots to overhang chunk text in rmarkdown html

问题描述

我正在使用 rmarkdown 准备一些 html 页面，用于在线发布.在显示绘图时，我想利用典型计算机显示器上可用的更多宽度(这是我预期目标受众查看我的页面的方式).knitr 默认情况下，在常规缩放时似乎只使用大约 900 像素.

我在

这是我所追求的那种东西的模型，在 Paint 中缝合在一起:

解决方案

正如你已经意识到的，你不应该增加 .main-container 的宽度，而是应该增加图像的宽度.以下是实现它的一种方法:

---标题:R Markdown 全角数字"输出:html_document---```{r out.extra='style='max-width:none;宽度:100vw；margin-left:calc(50% - 50vw);"', fig.width = 12, fig.height = 3, device = "svg"}par(mar = c(4, 4.5, 1, .5))情节(压力)``

首先，您需要通过 max-width: none; 删除默认的 max-width 约束(由 rmarkdown 强加).然后将图像的宽度设置为 100vw，即窗口的全宽.此时，您的图像在 .main-container 中仍然是左对齐的，即它的左侧与其余的 body 元素对齐，因此您需要将图像向左移动它触及窗口的左边距，这就是 margin-left: calc(50% - 50vw) 上面所做的.你可以在一张纸上画一个盒子来理解它.基本上，margin-left: 50% 意味着图像将首先向右移动其容器宽度的一半(即，.main-container).这意味着它的左侧位于容器的中心.由于容器位于页面中央，因此您需要将图像向左移动 50vw(即窗口宽度的一半).向左移动意味着给它一个负的左边距，因此 -50vw.calc() 函数动态计算实际像素数，因此您不必假设容器的宽度是固定的.

一旦你理解了这个margin-left技巧，你就可以使用其他可能的宽度，例如，width: 90vw;margin-left: calc(50% - 45vw)，它为你提供一个宽度为 90vw 并在页面上居中的图像:

如果您不想在 上内联 CSS，您可以将代码块包装在

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 monitor (which is how I anticipate my intended audience viewing my pages). knitr by default only seems to use around 900 pixels at regular zoom.

I found some css in this thread which can make the total "canvas" bigger, which is helpful. However, this also increases the width of everything, including text, chunk echoes, etc, which I don't want. What I'd like is to have my figures "overhang" the other elements in width. Increasing fig.width and out.width doesn't accomplish this; the figures will simply shrink to fit within the same bounds used by the other elements, resulting in smaller font size, etc:

<style type="text/css">
.main-container {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}
</style>

```{r out.width = "150%", fig.width = 12, fig.height = 3, device = "svg", fig.align='center'}
plot(pressure)
```

Here's a mockup of the kind of thing I'm after, stitched together in Paint:

解决方案

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
---

```{r out.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}
.fullwidth img {
  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)
```
:::

这篇关于允许图在 rmarkdown html 中突出块文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！