Changing body font size in an RMarkdown ioslide

Publishing Your Results
, ,
1

What magic incantation do I put in my CSS stylesheet to change the body text of an RMarkdown file that's being rendered as anioslides_presentation? I thought I could slip it in the top of my doc like this:

<style type="text/css">

body{ /* Normal  */
      font-size: 40px;
  }
</style>

but that doesn't seem to change anything. I look at CSS files and there's about 1,245,193 ways to change fonts and I haven't the slightest clue which one changes the body font. Although I have tested 2,235 options that don't manage to change it at all.

1 Like
2

I have the same issue. I've med a custom.css file and I can change the size of the code, but I cannot seem to change the font-size of the normal text?

3

If you want to increase the font size for the entire slide, then the following css will do the trick (the following css targets the revealJS classes from the parent container all the way down to the slide content)

<style>
.reveal .slides section .slideContent{
    font-size: 102pt;
}
</style>

If you want to increase the size of a specific element (e.g., plain text, list items, links, etc.), add the target after .slideContent. For example, let's say I have an unorder list and I want to set the font size of the items to 62pt and change the color to red.

<style>
.reveal .slides section .slideContent ui li{
    font-size: 62pt;
    color: red;
}
</style>

Full Demo

test
========================================================
author: my name
date: some date
autosize: true

<style>
.reveal .slides section .slideContent ul li{
    font-size: 62pt;
    color: red;
}
</style>

First Slide
========================================================

For more details on authoring R presentations please visit <https://support.rstudio.com/hc/en-us/articles/200486468>.

- Bullet 1
- Bullet 2
- Bullet 3
1 Like
4

This solved it - Great!

One more thing, it seems that there is a pretty poor translation from the presentation preview in RStudio compared to viewing the presentation in a browser.

Actually two more things... When I then do view the presentation in the browser in full screen, the presentation is not stretched but rather simply stays in the middle, surrounded by a lot of white space?

5

What short of translation issues are you experiencing? When I was testing out the css, I had to execute a mix of page refreshes and launch new instances via View in Browser to see the changes.

It is possible to override the width of the slide content using the following css:

.reveal .slides{
    width: 90% !important;
}

You can go up to 100%. 95% was the max width where content stayed within the current slide. 90% seemed to be a good balance between white space and allowing enough room for content.