fig-width matching HTML grid layout sizes

[baptiste]

I'm planning to set the fig-width in code chunks to match the intended container size in the HTML output page (body/page/margin, etc.), so that the font sizes appearing in plots can be more consistent with the main text (and with each other).

You can see an example of inconsistent font sizes here: doc for margin figures, where the fonts are really small since the plotting device had a width substantially larger than the margin width in this output document.

One possible solution to this is to set the fig-width to the absolute size of the container. For example, if I set the grid layout to custom values

---
title: "testing custom width"
format:
  html: 
    fontsize: "1.3rem"
    grid:
      body-width: 900px
      margin-width: 300px
---

and use those sizes (converted to inches for R devices),

```{r}
#| echo: false
.body <- 900 / 96 # px per inch
.margin <- 300 / 96
.px2pt <- 72/96 # fontsize conversion
```

```{r figure, fig.width = .body, fig.height=6}
#| echo: false
#| column: body
#| fig-cap: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

[....]

it seems to mostly work (qmd input output preview, at least well enough for my purposes. I'm not after perfectly-identical sizes, but something close enough to not be too noticeable. Looking at the browser console, the layout grid isn't exactly the size I'd requested, for instance (887 vs 900))

---

---

---

---

I'm curious to hear what others are doing for this though – any tips to share?

[mcanouil]

Personally I go with ragg and svglite devices to have access to the scaling argument which is easier to use that fiddling with figure size.

```{r}
#| dev: ragg_png
#| dev.args: { scaling: 0.5 }
...
```

```{r}
#| dev: svglite
#| dev.args: { scaling: 0.5 }
...
```

[baptiste]

Bumping this because I think it'd be nice to have a tutorial somewhere to set the device parameters so that font sizes are consistent in a document (for HTML but also pdf, etc.). The basic workflow, which perhaps can be streamlined (I'm not sure how?) would be:

• find out the relevant widths of the document; in LaTeX I use

  \usepackage{layouts}
  \printinunitsof{in}\prntlen{\columnwidth}
  \printinunitsof{in}\prntlen{\textwidth}
  

  to display them (I haven't checked for margin figs, but there must be a similar thing), then comment this out.
• in the code chunks, I set the fig-width to this value
• plots use the desired font size
• no resizing of the images (out-width left as-is)

One strategy that could make this easier would be to include an optional show_layout parameter in Quarto, for all formats, that produces, when enabled, a dummy output file showing the document's layout dimensions (similar to what a Web Browser Tool displays when hovering over a page, or what \usepackage[showframe]{geometry} displays in LaTeX, etc.)