I am knitting an Rmd file in RStudio to HTML, and I'd like to increase the space between body text and tables/figures. Here's a nice solution for PDF output. What part of the CSS specifies this spacing in HTML output? I'm looking for a template-wide solution, not a manual <br>.
---
title: "Example"
output:
bookdown::html_document2:
fig_captions: yes
number_sections: false
theme: cerulean
highlight: tango
toc: true
code_download: true
code_folding: "show"
toc_float: true
---
<style type="text/css">
body{ /* Normal */
font-size: 18px;
font-family: Helvetica;
}
div#TOC li {
list-style:none;
background-image:none;
background-repeat:none;
background-position:0;
}
</style>
```{r setup, include=FALSE}
library(ggplot2)
library(knitr)
```
## Section
Here is some text before a table.
```{r cars}
kable(head(cars))
```
Here is some text after the table. Here comes a plot. Could use more space after the table and before the plot.
```{r pressure, echo=FALSE, fig.align="center", fig.cap="My caption", message=FALSE, warning=FALSE}
ggplot(cars, aes(speed)) +
geom_histogram()
```
Here is some text after the plot. Need some space between the figure caption and the body text.
Add
.figure {
margin-top: 100px;
margin-bottom: 100px;
}
table {
margin-top: 100px;
margin-bottom: 100px !important;
}
inside the <style> tag. Obviously adjust to the needed amount.
Related
I made a presentation with a scrollable code chunk output using the xaringan package in R before like the photo shown below.
I want to make the same scrollable code chunk output in quarto revealjs presentation. Anyone knows how to do it in quarto presentation?
scrollable code chunk output:
If it helps, here is the css code I used before when making a presentation in xaringan.
Thank you in advance!
/* scrollable code chunk output */
.remark-code {
display: block;
overflow-x: auto;
max-height: 100%;
padding: .5em;
color: #fff;
background: rgb(131, 139, 139);
}
You just need two steps to do the same in Quarto revealjs. At first, define a css class with overflow-x: auto and then pass the class to the chunk option class-output so that output of that will have horizontal scrolling.
---
title: Output Horizontal scrolling
format: revealjs
engine: knitr
---
## Quarto
```{r}
#| class-output: hscroll
library(gapminder)
df <- dplyr::bind_cols(gapminder, gapminder, .name_repair = "minimal")
head(df)
```
```{css, echo=FALSE}
.hscroll {
overflow-x: auto;
white-space: nowrap;
}
```
And if you want to do this for code chunks, instead of passing the .hscroll class as a chunk option to a specific chunk, use the knitr opts_chunk key in the yaml section.
---
title: Output Horizontal scrolling
format: revealjs
engine: knitr
knitr:
opts_chunk:
class-output: hscroll
---
## Quarto
```{r}
library(gapminder)
df <- dplyr::bind_cols(gapminder, gapminder, .name_repair = "minimal")
head(df)
```
```{css, echo=FALSE}
.hscroll {
overflow-x: auto;
white-space: nowrap;
}
```
I am trying to display some regression results in an rmarkdown html file. However, the output from the code chunks is too narrow and therefore it is very hard to read the p-values, etc, particularly when I include a floating table of contents. I have tried adjusting options(width = 9999) but this does not seem to fix the issue. I have also tried:
<style>
pre {
overflow-x: auto;
}
pre code {
word-wrap: normal;
white-space: pre;
}
</style>
which allows me to scroll horizontally if needed. However, given I am using regression results, I do not like having to scroll back and forth to read the coefficients and p-values. I have also tried:
<style>
.main-container { width: 1200px; max-width:2800px;}
</style>
adjusting the width and max-width values, to no avail. These solutions are suggested here.
Any idea how I can solve this issue?
Here is an example. Unfortunately I cannot post my regression results, so here is a matrix that essentially replicates the same issue:
---
title: "Untitled"
author: "me"
date: "11/10/2021"
output:
html_document:
toc: true
tow_float: true
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
options(width = 9999)
matrix = matrix(rnorm(100,5,2), ncol = 20)
matrix
However, when I knit the document, I get something like this:
How can I make the output wider?
I found out, where is your problem.
The floating toc is guilty.
Look, I took a code from that post and remove toc_float.
---
title: "R Notebook"
author: "me"
date: "11/10/2021"
output:
html_document:
toc: true
---
<style>
.main-container { width: 1800px; max-width:2800px;}
</style>
## R Markdown
```{r}
options(width = 1500)
dataM <- matrix(rnorm(100, 5, 2), ncol = 20)
dataM
```
And it works:
I think, that this space under toc is reserved. But can't say it with 100% confidence.
An addition
You should make a custom TOC with CSS.
I'm not a pro with CSS, so, I have compiled something for you. You can modify it...
CSS-file:
#TOC {
font-family: Arial, Helvetica, sans-serif;
color:black;
background-color: white;
position: fixed;
top: 0;
left: 0;
width: 150px;
border: 1px solid Black;
padding: 10px;
margin: 30px;
overflow:auto;
}
body {
max-width: 800px;
margin-left:210px;
line-height: 20px;
}
Your header:
---
title: "R Notebook"
author: "me"
date: "11/10/2021"
output:
html_document:
css: TOC.css
toc: true
---
I have a DT data table in my RMarkdown document that allows users to download to a csv. How can I shift this table to the left in my HTML file
in order to get the whole document to shift left, you can add inline CSS code in your Rmarkdown, like this
---
title: "DT table"
author: "Daniel"
date: "5/22/2021"
output: html_document
---
<style type="text/css">
.main-container {
max-width: 1800px;
margin-left: auto;
margin-right: auto;
}
</style>
```{r, message=FALSE, warning=FALSE}
library(DT)
datatable(iris)
```
Which renders in the web browser all the way to the left.
If you know more CSS than me, then you can control your document with Divs and CSS selectors to get a even more specific layout
I am using the rmdformats::material package. What is the CSS to change the top banner color?
Here is my code.
---
title: "test"
date: "hi"
output:
rmdformats::material:
self_contained: no
css: style.css
---
```{r knitr_init, echo=FALSE, cache=FALSE}
library(knitr)
library(rmdformats)
```
# test
Here is part of my CSS:
.page h1, .h1 {
color: #971b72 ;
}
The banner color seems to be set as the background of the .header-panel div. You should set your CSS to
.header-panel {
background-color: #971b72 ;
}
You can control the background color of the header in your .css file with the following code:
.header-panel {
background-color: #971b72;
}
Using kable() to render a simple table yields what seems to be the default pale font color for the table caption in the resulting html file. Is there a way to control the table (or figure) caption font color, size, etc?
---
title: "test"
output:
html_document:
theme: cosmo
---
```{r}
library(knitr)
tab.1 = table(mtcars$cyl, mtcars$vs)
kable(tab.1, caption="Table 1: Caption Font Color")
```
Aha! Customizing the CSS stylesheet does the trick.
caption {
color: red;
font-weight: bold;
font-size: 1.0em;
}
Adding to Ani's answer: if you don't want to write the css stylesheet separately, you can just include another chunk after your YAML:
```{r results="asis"}
cat("
<style>
caption {
color: red;
font-weight: bold;
font-size: 1.0em;
}
</style>
")
```
Now you can use a css code chunk directly, bypassing R. Adding echo = FALSE keeps it from being part of your output.
```{css, echo = FALSE}
caption {
color: red;
font-weight: bold;
font-size: 1.0em;
}
```