允许绘图突出 rmarkdown html 中的块文本

2024-01-07

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

我发现了一些CSS这个线程 https://stackoverflow.com/questions/34906002/increase-width-of-entire-html-rmarkdown-output这可以使总“画布”更大,这是有帮助的。然而,这也增加了所有内容的宽度,包括文本、块回声等,这是我不想要的。我想要的是让我的图形在宽度上“悬于”其他元素。增加fig.width and out.width没有做到这一点;这些数字将简单地缩小以适应其他元素使用的相同边界,从而导致较小的字体大小等:

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


正如您所意识到的,您不应该增加.main-container,而是图像。以下是实现它的一种方法:

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

首先,你需要删除默认的max-width约束(这是由降价) by max-width: none;。然后将图像的宽度设置为100vw,这意味着窗口的整个宽度。此时,您的图像内部仍然左对齐.main-container,即它的左侧与主体元素的其余部分对齐,因此您需要将图像向左移动,以便它接触窗口的左边距,这就是margin-left: calc(50% - 50vw)如上所述。你可以在一张纸上画一个方框来理解它。基本上,margin-left: 50%意味着图像将首先向右移动其容器宽度的一半(即,.main-container)。这意味着它的左侧位于容器的中心。由于容器位于页面中央,因此您需要将图像向左移动50vw(即窗口宽度的一半)。向左移动意味着给它一个负的左边距,因此-50vw. The calc()函数动态计算实际像素数,因此您不必假设容器的宽度是固定的。

一旦你明白了这一点margin-left技巧,您可以使用其他可能的宽度,例如,width: 90vw; margin-left: calc(50% - 45vw),它给你一个宽度的图像90vw并居中于页面:

如果您不想内联 CSS<img>,您可以将代码块包装在围栏分区 https://bookdown.org/yihui/rmarkdown-cookbook/custom-blocks.html带有类名,以便您可以重用为该类定义的 CSS。这是一个例子:

---
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)
```
:::
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

允许绘图突出 rmarkdown html 中的块文本 的相关文章

随机推荐