css - Created consistent caption formatting between figures and flextables in Rmd HTML output - Stack Overflow

时间： 2025-04-26 admin 业界

I am having trouble getting my captions for figures and tables having consistent formatting when knitting a Rmd file to HTML output from the Bookdown package. I have tried applying different methods from documentation here and various forums posts on stack overflow but none seem to make any difference. A few examples of things I tried without success below. Bonus points for solving the same problem if switching to PDF output.

---
title: "Caption Testing"

output:
  bookdown::html_document2: 
    toc: false
    fig_caption: yes
    number_sections: false
    self_contained: true
    mode: selfcontained
---

<style type="text/css">
  body{
  font-size: 16pt;
  
}
</style>

<style type="text/css">
  .caption{
  font-size: 16pt;
  font-weight: bold
}
</style>

<style type="text/css">
  caption{
  font-size: 16pt;
  font-weight: bold
}
</style>



<style type="caption">
  caption{
  font-size: 16pt;
  font-weight: bold
}
</style>



```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE, warning = FALSE, message = FALSE, out.width='100%' )

library(tidyverse)
library(flextable)

set_flextable_defaults(font.size=16)
```
## Placeholder Heading

Want to produce html document that has consistent formatting between figure and table captions.  Multiple approaches applied none seem to have any effect.  I have been avoiding set_caption(as_paragraph(etc...)) as I would prefer to set as a more global option and not having to copy/paste options for each table and consistency with how figure labels are formatted where the second css style code(.caption) gives desired result.

```{r figure, fig.cap="Example ggplot" , fig.asp=1}
mtcars %>%
  
ggplot(aes(cyl, wt) )+geom_point()
```


More text

```{r table1, echo=FALSE}

head(mtcars,10) %>%
  flextable() %>%
    set_caption("No extra formatting")


```

More text



```{r table2, echo=FALSE, tab.cap="Set in chunk options using tab.cap.style=.caption" ,tab.cap.style=".caption"}

head(mtcars,10) %>%
  flextable() 


```
More text

```{r table3, echo=FALSE, tab.cap="Set in chunk options using tab.cap.style=caption" ,tab.cap.style="caption"}

head(mtcars,10) %>%
  flextable() 


```
More text

```{r table4, echo=FALSE }

head(mtcars,10) %>%
  flextable() %>%
    set_caption(caption = "Set in set_caption style=caption", style = "caption")


```

More text

```{r table5, echo=FALSE }

head(mtcars,10) %>%
  flextable() %>%
    set_caption(caption = "Set in set_caption style=.caption", style = ".caption")


```
More text


```{r table6, echo=FALSE }

head(mtcars,10) %>%
  flextable() %>%
    set_caption(caption = "Set in set_caption html_classes=.caption",html_classes = ".caption")


```

---
title: "Caption Testing"

output:
  bookdown::html_document2: 
    toc: false
    fig_caption: yes
    number_sections: false
    self_contained: true
    mode: selfcontained
---

<style type="text/css">
  body{
  font-size: 16pt;
  
}
</style>

<style type="text/css">
  .caption{
  font-size: 16pt;
  font-weight: bold
}
</style>

<style type="text/css">
  caption{
  font-size: 16pt;
  font-weight: bold
}
</style>



<style type="caption">
  caption{
  font-size: 16pt;
  font-weight: bold
}
</style>



```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE, warning = FALSE, message = FALSE, out.width='100%' )

library(tidyverse)
library(flextable)

set_flextable_defaults(font.size=16)
```
## Placeholder Heading

Want to produce html document that has consistent formatting between figure and table captions.  Multiple approaches applied none seem to have any effect.  I have been avoiding set_caption(as_paragraph(etc...)) as I would prefer to set as a more global option and not having to copy/paste options for each table and consistency with how figure labels are formatted where the second css style code(.caption) gives desired result.

```{r figure, fig.cap="Example ggplot" , fig.asp=1}
mtcars %>%
  
ggplot(aes(cyl, wt) )+geom_point()
```


More text

```{r table1, echo=FALSE}

head(mtcars,10) %>%
  flextable() %>%
    set_caption("No extra formatting")


```

More text



```{r table2, echo=FALSE, tab.cap="Set in chunk options using tab.cap.style=.caption" ,tab.cap.style=".caption"}

head(mtcars,10) %>%
  flextable() 


```
More text

```{r table3, echo=FALSE, tab.cap="Set in chunk options using tab.cap.style=caption" ,tab.cap.style="caption"}

head(mtcars,10) %>%
  flextable() 


```
More text

```{r table4, echo=FALSE }

head(mtcars,10) %>%
  flextable() %>%
    set_caption(caption = "Set in set_caption style=caption", style = "caption")


```

More text

```{r table5, echo=FALSE }

head(mtcars,10) %>%
  flextable() %>%
    set_caption(caption = "Set in set_caption style=.caption", style = ".caption")


```
More text


```{r table6, echo=FALSE }

head(mtcars,10) %>%
  flextable() %>%
    set_caption(caption = "Set in set_caption html_classes=.caption",html_classes = ".caption")


```

Share Improve this question edited Apr 14 at 15:33 TylerH 21.1k79 gold badges79 silver badges114 bronze badges asked Nov 15, 2024 at 20:04 BEVAN 6353 silver badges13 bronze badges

Add a comment |

1 Answer 1

Sorted by: Reset to default 2 +50

Your custom CSS styles will not be applied to the flextable captions because flextables are rendered in the Shadow DOM, which uses its own separate CSS styles.

However, you can append custom CSS style to a flextable instance using

ft <- flextable::set_table_properties(
  x = ft, 
  opts_html = list(
    extra_css = 'caption {
      font-size: 16pt;
      font-weight: bold;
    }'
  )
)

Then this ft will be rendered with 16pt bold caption text in bookdown html_document.

To apply custom CSS styles to all flextables, use set_flextable_defaults(extra_css = ...):

set_flextable_defaults(extra_css = 'caption {
  font-size: 16pt;
  font-weight: bold;
}')