January
January

Reputation: 17140

Make "Figure" text bold in quarto figure captions

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.

Upvotes: 9

Views: 4381

Answers (3)

Jan
Jan

Reputation: 9348

Distinguishing between a document with format: html or format: pdf:

format: html

We can use a js approach where we modify the innerHTML of the <figcaption>. What is needed is to embed everything up to the . within <strong> tags:

---
title: "Figure"
format: 
  html:
    include-after-body: 
      text: |
        <script>
          document.addEventListener("DOMContentLoaded", () => {
            document.querySelectorAll("figcaption").forEach(e => {e.innerHTML 
            = e.innerHTML.replace(/((.*?)\.)/, "<strong>$1</strong>")})
          });
        </script>
crossref:
  title-delim: "."
---

## Quarto

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

plot(1:10)
```

enter image description here

format: pdf

We can use the LaTeX caption package and apply labelfont=bf:

---
title: Figure
format:
  pdf:
    include-in-header:
      text: |
        \usepackage[labelfont=bf]{caption}
crossref:
  title-delim: "."
---

## Quarto

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

plot(1:10)
```

enter image description here

Upvotes: 3

January
January

Reputation: 17140

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.

Upvotes: 1

Shafee
Shafee

Reputation: 20067

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.

Upvotes: 2

Related Questions