Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Adjust spacing between title and subtitle of html_document output from Rmarkdown

I am trying to adjust the vertical spacing between the main title and subtitle for html output from rmarkdown. I’ve read many questions that address this for pdf output but none of the solutions appear to work for html.

YAML looks like this.

---
title: "for question"
subtitle: "is too far away"
author: "CAWA"
output: html_document
---
knitr::opts_chunk$set(echo = TRUE)
<style type="text/css">
h1.title {
  font-size: 38px;
  text-align: center;
}
h3.subtitle {
  font-size: 18px;
  text-align: center;
}
h4.author {
  font-size: 12px;
  text-align: center;
}

</style>

Gives:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

from above code

How to simply move subtitle and author up any distance?

I can’t find any code that appears to adjust this for html.
Is there an argument to be added to the css? something similar to \vspace{-1cm}, which do not seem to work in this instance.

Also tried to comb through the rmarkdown documentation and either I missed this or its not there. Seems like given all the focus on customization this should be possible.

>Solution :

You could achieve your desired result by setting the margin-bottom for the title and margin-top for the subtitle, e.g. in the code below I set both to 0px:

---
title: "for question"
subtitle: "is too far away"
author: "CAWA"
output: html_document
---

```{r}
knitr::opts_chunk$set(echo = TRUE)
```

```{css}
h1.title {
  font-size: 38px;
  text-align: center;
  margin-bottom: 0px;
}
h3.subtitle {
  font-size: 18px;
  text-align: center;
  margin-top: 0px;
}
h4.author {
  font-size: 12px;
  text-align: center;
}
```

enter image description here

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading