quarto-figcap-demo

The “problem”/current behavior

Figure in .column-body-outset div. The figcaption element does not inherit .column-body-outset, which is applied only to the image itself.1

HTML translated into DOM tree translated into visual UI and accessibility tree.
Figure 1: Figure from AOM Explainer shows HTML translated into DOM tree translated into visual UI and accessibility tree.

Appearance in RStudio visual editor

If this behavior is intended, I would expect it to look different in the visual editor (the figure caption appears inside of what I would think would translate into the <div class="column-body-outset">).

Image and caption inside of the column-body-outset as they appear in the RStudio visual ediotr.
Figure 2: Image and caption inside of the column-body-outset as they appear in the RStudio visual ediotr.

Desired output

Here’s how the same element would look rendered if I add column-body-outset to the <figcaption>’s classes (outlines added to make it easier to see).

Figure with caption aligned with image so both have column-body-outset. Annotation added to show that there is an Image with class .column-body-outset, and, below .column-body-outset class manually applied to figcaption.
Figure 3: Screenshot of page with caption aligned with image so both have column-body-outset.

More examples

The image below is in a div with .column-page-inset.

Cartoon skulls in decorative circles.
Figure 4: Cartoon skulls.

Next, we’ve got one in .column-page-left.

Cartoon green grass on a turquoise background.
Figure 5: Cartoon grass.

And here come the skulls again, but with .column-screen-right.

Cartoon skulls in little decorative circles.
Figure 6: Cartoon skulls in little decorative circles.

Now .column-screen-left.

Cartoon skulls in little decorative circles.
Figure 7: Cartoon skulls in little decorative circles.

Examples with grid columns

Screenshot of un-tidied bibliography entries in BibTex Tidy web interface.
Figure 8: Screenshot of un-tidied bibliography entries in BibTex Tidy web interface.
Screenshot of same bibliography entries after tidying in BibTex Tidy web interface.
Figure 9: Screenshot of same bibliography entries after tidying in BibTex Tidy web interface.

Margin figures and images

Per OrenBochman’s comment in quarto-cli Issue #8666, the captions for images placed in margins using .column-margin are appearing in the body column with Quarto version 1.4.

![a caption](file_name.png){.column-margin}
Green cartoon grass on a turquoise background.
Figure 10: Green cartoon grass on a turquoise background.

Now let’s see how it works with the lightbox class applied to Figure 11:

Footnotes

  1. Image used is from the Appendices of The Accessibility Object Model: Explainer by Alice Boxhall, James Craig, Dominic Mazzoni, and Alexander Surkov (2021).↩︎