CODEWITHSUNDEEP
rr-markdown
daniellga
daniellga

Reputation: 1224

reescale html text when the window size is changed

I have the following standard .Rmd file.

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

We can see the output in full window form:

output1

When we reduce the window size, the plot scales down so it still fits, while the title and text letters keep the same size and the gap between words start to decrease to a point where a new line is created to accommodate it all.

output2

Is there any way I can make the title, or any other HTML text, to behave like the plot, keeping the structure and scaling down when the size of the page is reduced?

Upvotes: 1

Views: 467

Answers (1)

Julian_Hn
Julian_Hn

Reputation: 2141

We can use custom css styles to achieve scaling:

---
---
    ```{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.

Look at https://bookdown.org/yihui/rmarkdown-cookbook/html-css.html and https://css-tricks.com/viewport-sized-typography/ for more details concerning inclusion of CSS in RMd and Viewport based scaling in CSS.

Big Window

Small Window

If we want to fix the width of the output to a page size we can do so by fixing the width of the main container. Then we should be able to use manual linebreaks at the positions we need.

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

Upvotes: 2

Related Questions