How to control figure, etc. caption style?

I use quarto (currently in ipynb file). This is an example of a figure caption in HTML from Quarto manual

image

According to the requirements my document must meet, "Figure" must be in bold. Similar requirements are for tables too.

How can this be achieved (at least for HTML output)?

More flexibility for cross referencing labels and others will be in order for a later Quarto version. Follow

for updates. Among the proposal:

However, I cannot figure out an easy way to have the fig-labels bold.

For now, this seem to work but only for the label not the number

---
title: "test"
format: html
crossref:
  fig-title: "**Figure**"
---

![Elephant](https://raw.githubusercontent.com/quarto-dev/quarto-web/main/docs/authoring/elephant.png){#fig-elephant}

See @fig-elephant for an illustration.

You would need to use JS if you really need to that in HTML , but to do the same for LaTeX (and PDF) it would require post processing the .tex before rendering to PDF.

Example for catching all Figure i caption and applying bold using <strong> tag (could also be a span with class and then add a CSS to apply font-weight)

document.querySelectorAll("figcaption").forEach(e => {e.innerHTML = e.innerHTML.replace(/^(Figure&nbsp;\d+)/, "<strong>$1</strong>")})

would be inserted that way

---
title: "test"
format: 
  html:
    include-after-body: 
      text: |
        <script>
          document.addEventListener("DOMContentLoaded", () => {
            document.querySelectorAll("figcaption").forEach(e => {e.innerHTML = e.innerHTML.replace(/^(Figure&nbsp;\d+)/, "<strong>$1</strong>")})
          });
        </script>
---

![Elephant](https://raw.githubusercontent.com/quarto-dev/quarto-web/main/docs/authoring/elephant.png){#fig-elephant}

See @fig-elephant for an illustration.

Hope it helps

I updated the regex into /^(Fig.*?&nbsp;\d+([.]\d+[.]))/ to meet my project's requirements. And the result is this:
image
So JavaScript solution really works.

Just I'm wondering why this part (Fig. with the numbers) is not assigned an additional CSS class with e.g., <span class="fig-cap-numbers"> tag to be easier to work with it via CSS. As this is the case in Bookdown HTML files? Was this tag/class not included in Quarto on purpose?

Probably not on purpose. This would be something to suggest in A few suggestions for cross referencing and text layout · Issue #1095 · quarto-dev/quarto-cli · GitHub or a new issue linking to this one. I agree this should be easier

This topic was automatically closed 45 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.