Changing Font Sizes in R Dashboards

Question

I found this dashboard example that was made using Flexdashboard in R :https://beta.rstudioconnect.com/jjallaire/htmlwidgets-showcase-storyboard/htmlwidgets-showcase-storyboard.html

There is some text in this dashboard (i.e. the "bullets") such as "Compose maps using arbitrary combinations of map tiles, markers, polygons, lines, popups, and GeoJSON." I am interested in learning about how to change the font/font size for this kind of text.

I found this post on Stackoverflow (Change font size for individual text section in flexdashboard) that shows how to change the font for the titles:

---
title: "Title"
output: 
  flexdashboard::flex_dashboard:
theme: readable
orientation: columns
vertical_layout: fill
---

<style type="text/css">

.chart-title {  /* chart_title  */
   font-size: 30px;
   font-family: Algerian;

</style>

But I am not sure if this code can be used to change the font/font size for the "bullet text" on each individual page.

For example, if you take the first two tabs of this dashboard:

---
title: "HTML Widgets Showcase"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
    social: menu
    source: embed
---

```{r setup, include=FALSE}
library(flexdashboard)
```

### Leaflet is a JavaScript library for creating dynamic maps that support panning and zooming along with various annotations.

```{r}
library(leaflet)
leaflet() %>%
  addTiles() %>%
  addMarkers(lng=174.768, lat=-36.852, popup="The birthplace of R")
```

***

https://rstudio.github.io/leaflet/

- Interactive panning/zooming

- Compose maps using arbitrary combinations of map tiles, markers, polygons, lines, popups, and GeoJSON.

- Create maps right from the R console or RStudio

- Embed maps in knitr/R Markdown documents and Shiny apps

- Easily render Spatial objects from the sp package, or data frames with latitude/longitude columns

- Use map bounds and mouse events to drive Shiny logic


### d3heatmap creates interactive D3 heatmaps including support for row/column highlighting and zooming.

```{r}
library(d3heatmap)
d3heatmap(mtcars, scale="column", colors="Blues")
```

***

https://github.com/rstudio/d3heatmap/

- Highlight rows/columns by clicking axis labels

- Click and drag over colormap to zoom in (click on colormap to zoom out)

- Optional clustering and dendrograms, courtesy of base::heatmap

I tried to add this font/font size customization and it did not seem to change anything:

---
title: "HTML Widgets Showcase"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
    social: menu
    source: embed
---

```{r setup, include=FALSE}
library(flexdashboard)
```

### Leaflet is a JavaScript library for creating dynamic maps that support panning and zooming along with various annotations.

```{r}
library(leaflet)
leaflet() %>%
  addTiles() %>%
  addMarkers(lng=174.768, lat=-36.852, popup="The birthplace of R")
```

***


<style type="text/css">

.chart-title {  /* chart_title  */
   font-size: 30px;
   font-family: Algerian;

</style>

https://rstudio.github.io/leaflet/

- Interactive panning/zooming

- Compose maps using arbitrary combinations of map tiles, markers, polygons, lines, popups, and GeoJSON.

- Create maps right from the R console or RStudio

- Embed maps in knitr/R Markdown documents and Shiny apps

- Easily render Spatial objects from the sp package, or data frames with latitude/longitude columns

- Use map bounds and mouse events to drive Shiny logic


### d3heatmap creates interactive D3 heatmaps including support for row/column highlighting and zooming.

```{r}
library(d3heatmap)
d3heatmap(mtcars, scale="column", colors="Blues")
```

***


<style type="text/css">

.chart-title {  /* chart_title  */
   font-size: 30px;
   font-family: Algerian;

</style>

https://github.com/rstudio/d3heatmap/

- Highlight rows/columns by clicking axis labels

- Click and drag over colormap to zoom in (click on colormap to zoom out)

- Optional clustering and dendrograms, courtesy of base::heatmap

Can someone please show me how to do this?

Thanks!

Answer 1

BLUF or the better known TL;DR

I'm going to give you your answer, then if you keep reading, I'll show you how I know what the answer is.

BTW, a lot of people still use type in style tags, but it's actually deprecated. It's not going to hurt anything, but it doesn't do anything, either.

<style> 
li > p {  
  font-size: 1.2em;
} 
</style>

em is a relative size. If you're not too knowledgeable on font sizes or why that might matter, you can read about that here.

The details

To change your bullets, you're looking to modify the HTML tags <li> or list-item tag. When HTML classes are added, styles can be overridden (among other reasons that styles are ignored). Additionally, you might be unpleasantly surprised what else this changes. For example, the tabs are list elements, as well.

In that styling call I provided initially, I used li > p. That means a bullet with an embedded <p> or paragraph tag. There is no paragraph tag used in the tabs' list, so that ensures they aren't included in this change. I wouldn't set the font size for the paragraph tag, because that is one of the most common tags in HTML (that and the div or division tag). You'd likely change a lot more than expected.

So how do I know this?

Open developer tools

One of the ways that you can find out how it's documented behind the scenes is to knit and render it in your browser. Right-click on your web page and select inspect (Chrome), developer tools (Firefox), or whatever the equivalent is for the browser you use. My default is Chrome, but all browsers are similar in what features they offer in developer tools.

Your view should look similar to this.

Find an HTML element that corresponds with one of your bullets

In Chrome, there is a box with an arrow pointing to it. (In the image, it's in the middle-left, where the page and developer tools come together.) All of the browsers have something like this. It can make finding what you're looking for easier. If you click that wherever you hover your mouse in the webpage, in the developer tools area, the corresponding element is also highlighted. Like this.

Alternatively, you can select anywhere within the elements pane of developer tools to set the focus and then press CMD+F or CTRL+F (depending on your setup). Since you're looking for the content in the bullets, you could type the text that appears in the bullets. In this image, the search bar is at the bottom.

From that image, you can see that this is a <p> tag, but there are MANY of those, so you can look at the parent element to be more specific. So if you look above the text, the parent is an <li> tag. (If you went to the next parent, you'd find a <ul> tag (unordered list tag).

Identify where the current size is coming from

When I focused on the correct HTML element tag, I can look at the assigned styles and find where the font size is set.

In this image, on the left, my element is selected. On the right, you can see the font size setting. You may have to scroll down in this pane to find where the font size setting. If it's inherited, you may not find it.

Style settings ignored? Can't find it?

If you look at the far right and scroll down, you can see anything that directs a font size to this element. This is useful when you set a style that's being ignored.

Right now, these bullets have the font-size specified from four different settings. Here's a closeup of that far-right section. From this information, if the style was ignored, I would probably use that class label for the style setting instead.

There are more things you can do with this and more ways you could find what you're looking for. This should get you started, though.