Problems with interactives (e.g. leaflet, plotly) in closeread?

[agrogan1]

First off, thank you to the Authors of closeread for a wonderful library.

This may well be user error on my part, but I consistently have problems incorporating interactives (e.g. leaflet, plotly) into a closeread document.

• Published example here: https://globalfamilies.quarto.pub/interactives-demo/
• GitHub repo here: https://github.com/agrogan1/closeread/tree/main/interactives-demo

Any thoughts appreciated.

[jimjam-slam]

Hi @agrogan1! The essential problem is that your interactive don't automatically fill the available space, and Quarto doesn't know what size to make them without guidance. I have two solutions; the latter is more consistent for what you want to achieve in my opinion (and I'll talk to @andrewpbray about whether it's something we might consider building in more widely).

Solution 1: knitr YAML options and .scale-to-fill

The most consistent way to size figures in my experience is with the out-width and out-height chunk options:

```{r}
#| label: fig-world
#| fig-cap: "Countries of the World"
#| out-width: 800px
#| out-height: 600px

# [figure code here]

If you set these to fixed units (eg. pixels), you'll likely find that they're too big for mobile. Adding the .scale-to-fill class to your Closeread sticky ID should fix this in theory, but when I test that out, it seems it's not scaling down all the way at narrow widths. We might have to do some bug testing here!

.scale-to-fill also visually scales your interactive up or down, so text in it might look quite small or quite large, depending on the innate size you give it with out-*.

:::{#cr-leaflet-map .scale-to-fill}

Solution 2: container query units

Add this chunk of CSS to the your document (ideally outside the cr-section) or in an external stylesheet:

```{=html}
<style>

  .sticky-col-stack {
    container-name: sticks;
    container-type: size;
  }

  .sticky-col-stack .html-widget {
    width: 100cqw !important;
    height: 100cqh !important;
  }
</style>
```

This creates a container for our sticky content and forces all htmlwidgets (including those made by the {leaflet} and {plotly} R packages) to take up all the space available in the container. Based on my initial tests, this works quite well! I reckon it might be worth @andrewpbray and I discussing folding this functionality into .scale-to-fill so that it handles htmlwidgets gracefully, but we'll need to play with it more to make sure. You might also find edge cases where you need to provide a sizing policy to those widgets, but I think it'll be fine in most cases.

If you have figure captions (as you do in one case) and use this option, you might also want to dial the height down from 100cqh to something smaller, like (say) 95cqh. Play with this to test. If you want to size each figure individually, use #cr-plotly-map .html-widget instead of .sticky html-widget (which targets all the stickies at once).

Also note that this code will likely override whatever sizing you provide in the R code!

I hope these solutions help 😊

[agrogan1]

Many many thanks! I tried your second solution with CSS and it worked PERFECTLY! I've updated my materials accordingly.

• Published example here: https://globalfamilies.quarto.pub/interactives-demo/
• GitHub repo here: https://github.com/agrogan1/closeread/tree/main/interactives-demo

[jimjam-slam]

I'm glad to hear it! 😊