Layouts

Decide where your triggers and stickies lie on the page.

The relative positioning of the triggers and the stickies determine the layout. You can set the layout of a section using the layout attribute on the block that defines the section.

:::{.cr-section layout="overlay-center"}
< Content of the section, including stickies and narrative blocks >
:::

Layout options

Options for layout include:

• sidebar-left (default)
• sidebar-right
• overlay-left
• overlay-center
• overlay-right

In the overlay layouts, the sticky column occupies the entire screen width and the narrative column scrolls over it. All layouts will automatically revert to overlay-center when viewed on a mobile device.

Documents containing multiple Closeread sections can use the same layouts or different ones. As an alternative to specifying the layout on the section block, it can also be defined in the document yaml under the cr-section key.

---
format:
  closeread-html:
    cr-section:
      layout: "overlay-center"
---

If a layout is specified in the document yaml, it will be propagated to all sections in the document. If a section has its own layout specified, that will override the document yaml similar to how code cell execution options work.

Presentation mode

Closeread documents place special emphasis on the “stickies”: the text, images, or code found in the main column that is described in the narrative.

While viewing any Closeread document in a browser, you can press p on the keyboard to view it in presentation mode. Presentation mode is identical to the overlay-center layout except the narrative column is made transparent. You can return to the original layout by pressing p again. You can advance to the next trigger using the forward-arrow key and return to the previous trigger using the back-arrow key.

Removing header space

By default, the top of any Quarto HTML document, including closeread-html, will reserve space at the top of the document for the title block. To remove this, you can use the remove-header-space option in the document header¹.

---
format:
  closeread-html:
    remove-header-space: true
---

Removing the header space is often a good choice if your entire document is one large Closeread section. If that is the case, you may also want to consider disabling the Quarto sidebar.

One of the unique characteristics of a scrollytelling Quarto doc is it allows you to link the animation of a graphic with the scrolling of the user. Read on to learn how to include interactive graphics!

Footnotes

1. If you use remove-header-space, you might want to add a title of your own! Be aware that the option will also hide other document metadata that is normally printed in the title block.