允许绘图突出 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 中的块文本 的相关文章

  • 如何用外部图像填充地图边界?

    我正在创建一张带有州边界的巴西地图 这可以直接使用ggplot2 and geom sf 然而 这一次 我不想用数据填充每个状态的颜色 而是想用外部图像 png 填充每个状态的边界 类似于this https online olivet e
  • 在shiny中过滤传单地图数据

    我在用传单地图设置这个闪亮的东西时遇到了麻烦 我的原帖 https stackoverflow com questions 50111566 applying leaflet map bounds to filter data within
  • 您能否确定 CSS 文件的范围,使其仅适用于给定元素的后代?

    给定一个 css 文件 有没有办法限制整个文件的范围 使其仅适用于给定元素内的元素 例如给定 div span class some element span div 有没有一种方法可以将整个 css 文件的范围应用于 容器 中的所有元素
  • BUG - 在 IOS 中没有选择标签的完成按钮

    我正在使用最新的离子并有一个简单的选择标签
  • React JS - 单击时更改颜色并将默认颜色放在所有其他颜色上

    我有 x 个渲染数文章预览依赖于 API 调用的组件 div div Object keys images map index i gt return div div
  • 使用 bootstrap 将搜索图标放入文本框中

    我默认使用引导程序 文本框占据列的全宽 我想将搜索图标放在文本框的末尾 我的代码是这样的 div class container div class row div class form group col lg 4 div div div
  • 如何使用 css 在标题的两侧放置实线? [复制]

    这个问题在这里已经有答案了 可能的重复 如何在标题文本上制作字段集图例样式的 背景线 https stackoverflow com questions 5985009 how can i make a fieldset legend st
  • 如何删除箱线图上的刻度线

    我试图从箱线图中删除 x 轴刻度线 但保留与刻度线关联的标签 这在基础 R 中可能吗 colors lt c lightskyblue3 gray78 gold1 wheat1 boxplot avgscore module data mi
  • 使用JQuery检查元素是否有边框?

    所以我正在玩 el css 尝试确定元素是否有边框 我用 css border style solid 设置边框 这是可行的 但实际上它设置了 4 种单独的样式 border right style border left style bo
  • 使用 javascript 将 html 文本渲染为位图,无需服务器端代码

    我需要使用 javascript 代码来转换 html 中的文章 帖子 以便最终用户以位图的形式查看 有没有办法在没有服务器端代码的情况下做到这一点 example p testing text here p 您可以使用例如html2can
  • javascript中输入类型时间的值

    我有这个html
  • R - Plm 和 lm - 固定效应

    我有一个平衡面板数据集 df 本质上由三个变量组成 A B and Y 对于一堆独特识别的区域来说 它会随着时间的推移而变化 我想运行一个回归 其中包括区域 下面等式中的区域 和时间 年份 固定效应 如果我没记错的话 我可以通过不同的方式来
  • 如何计算R中移动窗口内的平均斜率

    我的数据集包含2个变量y 和 t 05s y 每 05 秒测量一次 我正在尝试计算移动中的平均坡度20秒窗口 即计算第一个 20 秒斜率值后 窗口向前移动一个时间单位 05 秒 并计算下一个 20 秒窗口 在以下位置生成连续 20 秒斜率值
  • 如何创建自定义元素扩展类的新实例

    我正在尝试以下示例谷歌开发者网站 https developers google com web fundamentals getting started primers customelements extendhtml我收到错误 Typ
  • Menu.Item 中的 Antd 自动换行

    可以在 Menu Item 组件中应用自动换行吗 示例不起作用
  • 监听浏览器宽度以进行响应式网页设计?

    我正在努力使我的网站适合移动设备 我想知道浏览器窗口的大小 以便当它比 728px 窄时我可以执行某些操作 而当它大于 728px 时我可以执行其他操作 这必须考虑到调整 PC 上的窗口大小以及在手机中从纵向模式更改为横向模式 如何才能做到
  • 一个接一个地淡入div

    大家好 我很擅长 HTML 和 CSS 但才刚刚开始接触 jQuery 的皮毛 我希望让 3 个 div 在页面加载时逐渐淡入 到目前为止我有这个 我听说使用 css 将显示设置为 none 对于任何使用非 JavaScript 浏览器的人
  • 将 div 文本分配给变量然后显示它

    我有一个简单的任务 我试图完成学习 JavaScript 但一直无法找到明确的答案 这是代码 div Testing div 基本上我希望将方框 div 中的文本存储到变量中 然后 我想在页面的不同部分显示该变量的文本 使用上面的代码我得到
  • 为什么我的图像下方有空间? [复制]

    这个问题在这里已经有答案了 图像在下面获得了神秘的空白空间 即使padding 0 margin 0被应用 示范 http jsfiddle net cLETP 红色边框应该包围图像 但底部有空间 造成这种情况的原因是什么 如何删除该空间
  • 是否可以使“HTML 到语音”与“文本到语音”相同?

    我有一个奇怪的要求 在我现有的应用程序中我有Text2Speech为此 我使用了AVSpeechSynthesizer 到语音文本 但现在要求发生了变化 现在我需要将 HTML 文件数据转换为文本 例如HTML2Speech 我们可以想到的

随机推荐