I recently discovered the [`width` special](https://github.com/observablehq/stdlib/blob/main/README.md#width) included with the OJS standard library! And here I've been, manually sizing my charts like a chump 😛

This isn't necessarily an issue - I would class it more as "surprising behaviour - but `${width}` appears not to be the local width of the chunk in which it is called, but instead appears to be a global variable whose value depends on the location of the chunk in which it is first evaluated.

There might be a race condition here with regard to exactly which chunk that is, but I'm not 100% sure.

Since Observable Notebooks typically run in an environment where all cells have the same width (on <https://observablehq.com>), I'm not entirely surprised that this hasn't come up before! But it could lead to unexpected or surprising results in a Quarto document context.

## Sample A: not called in any OJS chunk (only interpolated into Markdown)

```
---
title: "Test width"
---

The width of this section is **${width}**.
```

![image](https://user-images.githubusercontent.com/6520659/170202074-8a836d32-4d2d-4caa-ad8e-a8007381c416.png)

Here, `${width}` doesn't evaluate at all. I'm speculating that if no OJS cell is defined then maybe the standard library isn't loaded at all, since even regular string interpolation (eg. `${1+1}`) isn't evaluated.

## Test B: calling in a single OJS chunk

````
---
title: "Test width"
---

Let's see if we detect width!

The width of this section is **${width}**.

## In an OJS block

```{ojs}
md`Width is **${width}**`
```
````

Here, `${width}` evaluates to the width of the section it's called in (_not_ the width of the entire page). it responds as I expect to page-resizing, getting smaller as I shrink the section but maxxing out at the max section width.

![image](https://user-images.githubusercontent.com/6520659/170202620-b7859265-ac43-414c-9446-da3bad9d0a9d.png)

## Test C: calling in two OJS chunks of different widths

````
---
title: "Test width"
---

Let's see if we detect width!

The width of this section is **${width}**.

## In an OJS block

```{ojs}
md`Width is **${width}**`
```

And what about in a screen-width section?

::: {.column-screen style="background-color:#ccddff"}
```{ojs}
md`The width of this screen-wide section is **${width}**.`
```
:::
````

![image](https://user-images.githubusercontent.com/6520659/170202897-aff60904-f18b-4433-beb2-42641b001f49.png)

Here, _both_ calls of `${width}` refer to the width of the screen section, even though the first call is still in the narrower section. As I resize the page, it responds to the changing size of the screen section.
cscheid
2022-05-25T07:23:57Z
jimjam-slam
enhancement ojs-engine
closed
OJS `width` variable evaluates in surprising ways
https://github.com/quarto-dev/quarto-cli/issues/970