# Figures Quarto provides comprehensive support for figures including sizing, layout, subfigures, and accessibility features. ## Basic Figure Syntax ### Markdown Images ```markdown  ``` ### With Attributes ```markdown {width=50%} ``` ### Cross-Referenceable Figure ```markdown {#fig-example} See @fig-example. ``` ## Figure Attributes Common attributes for images: | Attribute | Description | Example | | ----------- | ------------ | ------------------------ | | `width` | Image width | `width=50%`, `width=4in` | | `height` | Image height | `height=3in` | | `fig-align` | Alignment | `fig-align="center"` | | `fig-alt` | Alt text | `fig-alt="Description"` | ### Sizing Multiple units supported: ```markdown {width=50%} {width=400px} {width=4in} {width=10cm} ``` ### Alignment ```markdown {fig-align="left"} {fig-align="center"} {fig-align="right"} ``` ### Alt Text for Accessibility ```markdown {fig-alt="Detailed description for screen readers"} ``` Alt text differs from caption - it describes the image content for accessibility. ## Computational Figures **In this repo, use div syntax instead** --- see [`shared/writing/quarto-figure-captions.md`](../../../shared/writing/quarto-figure-captions.md). The chunk-option form below is the general Quarto convention this repo overrides. Figures generated from code use hashpipe options: ````markdown ```{{language}} #| label: fig-scatter #| fig-cap: "Scatter plot showing the relationship." #| fig-alt: "Scatter plot with positive trend." #| fig-width: 8 #| fig-height: 6 #| fig-align: center # code that produces a figure ``` ```` ### Figure Options | Option | Description | Example | | ------------------ | ---------------- | ------------------------------- | | `fig-cap` | Caption | `"Figure caption."` | | `fig-subcap` | Subcaptions | `["A", "B"]` | | `fig-alt` | Alt text | `"Description."` | | `fig-width` | Width in inches | `8` | | `fig-height` | Height in inches | `6` | | `fig-align` | Alignment | `"center"` | | `fig-cap-location` | Caption position | `"bottom"`, `"top"`, `"margin"` | | `fig-format` | Output format | `"png"`, `"svg"`, `"pdf"` | | `fig-dpi` | Resolution | `300` | ## Subfigures Group multiple images with a shared caption: ```markdown ::: {#fig-comparison layout-ncol=2} {#fig-first} {#fig-second} Comparison of two approaches. ::: See @fig-comparison, particularly @fig-first. ``` ### From Code ````markdown ```{{language}} #| label: fig-panels #| fig-cap: "Panel figure." #| fig-subcap: #| - "Distribution of X" #| - "Distribution of Y" #| layout-ncol: 2 # code that produces two figures (one per panel) ``` ```` ## Figure Layouts For arranging multiple figures, use layout divs. See [layout.md](layout.md) for full layout options. ### Basic Layout ```markdown ::: {layout-ncol=2}   ::: ``` ### Layout Attributes | Attribute | Description | Example | | --------------- | ------------------- | ------------------- | | `layout-ncol` | Number of columns | `layout-ncol=2` | | `layout-nrow` | Number of rows | `layout-nrow=2` | | `layout` | Custom layout array | `layout="[[1,1]]"` | | `layout-valign` | Vertical alignment | `layout-valign=top` | ## Figure Panels For images without individual captions: ```markdown ::: {#fig-panel layout-ncol=2}   Multiple plots in a panel. ::: ``` ## Caption Location ### Document Level ```yaml fig-cap-location: top ``` ### Per Figure ````markdown ```{{language}} #| label: fig-example #| fig-cap: "Caption on top." #| fig-cap-location: top # code that produces a figure ``` ```` Options: `top`, `bottom`, `margin`. ## Lightbox Enable click-to-zoom for images (HTML only): ```markdown {.lightbox} ``` Or for a group: ```markdown ::: {.lightbox}   ::: ``` ### Lightbox Options ```markdown {.lightbox group="gallery" description="Detailed view"} ``` ### Enable Globally ```yaml lightbox: true ``` Or with options: ```yaml lightbox: match: auto effect: zoom loop: true ``` ## Linked Images Make images clickable: ```markdown [](fullsize.png) ``` Or link to URL: ```markdown [](https://example.com) ``` ## Figure Divs For complex figure content: ```markdown ::: {#fig-custom} Custom interactive figure. ::: ``` ## Document Defaults Set figure defaults in YAML: ```yaml format: html: fig-width: 8 fig-height: 6 fig-format: svg fig-dpi: 300 fig-align: center ``` ## Resources - [Quarto Figures](https://quarto.org/docs/authoring/figures.html) - [Figure Layout](https://quarto.org/docs/authoring/figures.html#figure-panels) - [Lightbox](https://quarto.org/docs/output-formats/html-lightbox-figures.html)