How to control figure, etc. caption style?

GegznaV · March 2, 2023, 9:43pm

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

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)?

cderv · March 6, 2023, 10:08am

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

github.com/quarto-dev/quarto-cli

A few suggestions for cross referencing and text layout

opened 09:21PM - 07 Jun 22 UTC

jjallaire

crossref

### Discussed in https://github.com/quarto-dev/quarto-cli/discussions/1088 <d…iv type='discussions-op-text'> <sup>Originally posted by **arnaudgallou** June 7, 2022</sup> Here're a few suggestions/recommendations for possible improvements. I couldn't find easy solutions in the documentation to do what follows so I assume no proper solutions already exist. ### Cross referencing 1. Being able to customize the text of the link when referencing a particular panels in a composite plot (e.g. generated by `ggplot::facet_grid()` or `ggplot::facet_wrap()`). The idea would be to have something that looks like [Fig. 1A]() or [Fig. 1A-B](). I'm currently using `[@fig-x]A-B` which produces [Fig. 1]()A-B but the unlinked plot tag looks ugly when the `ref-hyperlink` option is `true`. I was thinking to have something like `@fig-x{A}` or `@fig-x{A-B}` to append some text to the text link. 2. Somewhat similar to the first point. I'm missing a more flexible way to customize the prefix of supplementary figue/table refs. At the moment, using the `fig-prefix` option adds a space between the prefix and label. A solution could be to have no space as default prefix separator so that `fig-prefix: "Fig. S"` would produce Fig. Sx and add a space in the prefix if need be `fig-prefix: "fig. "`. Alternatively, we could have a yaml option to set the prefix separator. Currently using `Fig. S[-@fig-x]` which has the same ugly look when enabling hyperlinks. 3. Adding a `x-title-template` option for figures and tables to customize the text of figure/table titles easily and with more control. We could imagine something with a placeholder for the labelling. E.g. `fig-title-template: "**Fig. S{label}.**"` would produce **Fig. S1.** I can more or less do that with `title-delim` and `fig-title`, although I don't find it very convenient. However, I cannot figure out an easy way to have the `fig-labels` bold. Besides, I have the same spacing problem as mentioned in point 2 for supplementary figures/tables. 4. I'm missing an easy-to-use system for cross referencing between the supplementary materials and main text. Not sure what would be a simple solution for that because I assume cross references are generated during the rendering process. Ideally, I would imagine adding a yaml option in the main text file to link all references from a specific document (e.g. `appendix: supplementary.qmd`) and have a new tag for supplementary figures/tables (e.g. `@fig-supp-x`) for easy cross referencing in the main text. 5. Adding a way to have a cross reference and citation within the same pair of brackets. E.g.: `blah blah Foo (1999; Fig. 1)`. Probably quite specific and not very common so not sure how relevant it is. ### Text layout 1. Adding a yaml option to align figure/table captions to the left/right/center. This can easily be done with some css but such a trivial thing should be done with a yaml option in my opinion. 2. Adding a yaml option to justify the text of the document. Same as above, can easily be done with a line of css but having a yaml option to do it would make sense to me. ### Other In RStudio, that would be great to have the possibility to open a file that was included in a document using the `{{< include >}}` shortcode by clicking on it in the visual markdown editor. E.g.: ``` {{< include _file.qmd >}} # click the shortcode tag to open _file.qmd in a new tab ``` </div>

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

GegznaV · March 8, 2023, 1:33pm

I updated the regex into /^(Fig.*? \d+([.]\d+[.]))/ to meet my project's requirements. And the result is this:

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?