4

By default, when producing html, quarto adds the caption to a figure to the automatically generated text "Figure NN. ", where NN is the number of the figure. For example: the following R chunk

```{r}
#| label: myFirstFigure
#| fig-cap: A caption
plot(1:10)
```

Will produce caption which looks like that:

Figure 1. A caption

However, what I need is a caption which looks like that:

Figure 1. A caption

How can I achieve that?

Edit: @shafee shows in his answer that it is possible to make it 'Figure 1.', i.e. just the "Figure" in bold, but not the number. However, I would like to have both in bold (including the dot). Scientific journals often use bold for the "Figure", number and the first sentence of the caption.

January
  • 16,320
  • 6
  • 52
  • 74

2 Answers2

3

You can specify the title prefix used for captions using *-title options.

---
title: "Figure"
format: html
crossref:
  fig-title: '**Figure**'
  fig-labels: arabic
  title-delim: "**.**"
---

## Quarto

```{r}
#| label: fig-myFirstFigure
#| fig-cap: A caption

plot(1:10)
```

One very important detail to note, you must prefix your chunk label name with fig- (e.g. fig-yourChunkLabelName) to make these options work.

figure caption prefix (partially bold)

Also note that this solution could only bold the figure prefix Figure and the prefix separator ., but couldn't find a way to bold the numbers.

shafee
  • 15,566
  • 3
  • 19
  • 47
  • 3
    "but couldn't find a way to bold the numbers." Unfortunately, that is actually the issue here. I need it in that particular style, with number and title in bold. I was hoping something can be done with css, but until now I have not figured a way. – January Oct 17 '22 at 19:46
  • If this is a simple html document (I mean not with chapter like section), you can give a try with css counter. Though I haven’t tested yet, using css counter for figure and control the prefix explicitly could be an option of worth trying. – shafee Oct 17 '22 at 20:43
  • 1
    Well, I have better workarounds in Rmarkdown; one of the major points of using quarto was for me that figure captions and references are done automatically and painlessly. – January Oct 18 '22 at 07:21
  • For HTML, you can use CSS to bold the figure number or listing number. For example to bold a listing number, you could add the following to you a styles.css file: `.listing p{ font-weight:bold; }` and then add the following to your YAML: `format: html: number-sections: true css: styles.css` – StatsStudent May 03 '23 at 15:17
1

In the meanwhile, I came up with another solution which creates the desired output, at least for HTML and probably not under all circumstances. Basically, I found that creating a lua filter for quarto is not an option, because apparently the filters are run before quarto adds the figure numbering. Therefore, it is necessary to run pandoc with a custom lua filter after quarto has rendered the output. I found that the following works for me:

quarto render test.qmd -t html | pandoc -L ./figfilt.lua -o test.html

Here is the file figfilt.lua:

function Div(a)
  if a.classes[1] ~= "quarto-figure" then return end

  a.content = a.content:walk({
    Plain = function(el) 
      if el.content[1].t == "Str" and 
         string.find(el.content[1].text, "^Figure") then
        el.content[1] = pandoc.Strong(el.content[1])
      end
      return el
    end,
  })

  return a
end

As you can see, the images are no longer in an Image class if you don't specify the -f html option (but if you do, then you lose all the Quarto goodies like javascript). So it is a guesswork, really, and I don't think this solution is the best one.

January
  • 16,320
  • 6
  • 52
  • 74