更改窗口大小时的reescale html文本

时间:2020-07-21 13:43:14

标签: r r-markdown

我具有以下标准.Rmd文件。

---
title: "STARTSTARTSTART         ENDENDEND"
date: "`r format(Sys.time(), '%d de %B, %Y')`"
output:
  html_document
---



This is an [R Markdown](http://rmarkdown.rstudio.com) Notebook. When you execute code within the notebook, the results appear beneath the code. 

Try executing this chunk by clicking the *Run* button within the chunk or by placing your cursor inside it and pressing *Ctrl+Shift+Enter*. 

```{r}
plot(cars)
```

Add a new chunk by clicking the *Insert Chunk* button on the toolbar or by pressing *Ctrl+Alt+I*.

When you save the notebook, an HTML file containing the code and output will be saved alongside it (click the *Preview* button or press *Ctrl+Shift+K* to preview the HTML file).

The preview shows you a rendered HTML copy of the contents of the editor. Consequently, unlike *Knit*, *Preview* does not run any R code chunks. Instead, the output of the chunk when it was last run in the editor is displayed.

我们可以以全窗口形式查看输出:

output1

当我们减小窗口大小时,图将按比例缩小以使其仍然适合,而标题和文本字母保持相同大小,并且单词之间的间距开始减小到创建新行以容纳所有内容的程度

output2

有什么方法可以使标题或任何其他HTML文本表现得像情节,在减小页面大小时保持结构和缩小比例?

1 个答案:

答案 0 :(得分:2)

我们可以使用自定义css样式来实现缩放:

---
---
    ```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
    ```
# Custom CSS
    ```{css, echo=FALSE}
h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}
    ```

## R Markdown

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:

    ```{r cars}
summary(cars)
    ```

## Including Plots

You can also embed plots, for example:

    ```{r pressure, echo=FALSE}
plot(pressure)
    ```

Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.

请查看https://bookdown.org/yihui/rmarkdown-cookbook/html-css.htmlhttps://css-tricks.com/viewport-sized-typography/,以获取有关在RMd中包含CSS和在CSS中基于视口缩放的更多详细信息。

Big Window

Small Window

如果我们想将输出的宽度固定为页面大小,可以通过固定主容器的宽度来固定。然后,我们应该可以在所需位置使用手动换行符。

---
title: "STARTSTARTSTART &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; ENDENDEND"
date: "`r format(Sys.time(), '%d de %B, %Y')`"
output:
  html_document
---
<!--- Change width options to apppropiate values for your desired page size-->
<style type="text/css">
.main-container {
  width: 20cm;
  max-width: 20cm;
  min-width: 20cm;
  margin-left: auto;
  margin-right: auto;
}
</style>

    ```{r setup, include=FALSE}
    knitr::opts_chunk$set(echo = TRUE)
    ```
## R Markdown

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:

    ```{r cars}
    summary(cars)
    ```

## Including Plots

You can also embed plots, for example:

    ```{r pressure, echo=FALSE}
plot(pressure)
    ```

Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.