Closeread Feature Tour

A walkthrough of Closeread’s layouts, highlighting, zoom and scroll effects.

Ordinary Quarto text outside a cr-section scrolls as usual. Each section below shows a different group of closeread features.

1. Highlighting and zooming (sidebar-left)

A trigger is any paragraph that contains @cr-<id>. When it scrolls into view, the sticky with that id appears.

highlight="1" highlights a line by its number.

A range works too: highlight="2-3".

You can also highlight a span you’ve tagged with an id, like [yellow wood]{#cr-wood}.

zoom-to="4" zooms in on line 4 and centers it.

hlz="5" highlights and zooms in one step.

Two roads diverged in a yellow wood,
And sorry I could not travel both
And be one traveler, long I stood
And looked down one as far as I could
To where it bent in the undergrowth;

2. Code as a sticky (sidebar-right)

Code blocks can be stickies too. This section uses layout="sidebar-right".

Code lines can be highlighted by number, just like poem lines.

Here we highlight the loop body.

A trigger can also be a whole div with focus-on="cr-code" instead of an inline @cr-code. This is useful for longer passages with several paragraphs.

This entire div is one trigger.

It highlights the return line.

def fizzbuzz(n):
    out = []
    for i in range(1, n + 1):
        word = ""
        if i % 3 == 0: word += "Fizz"
        if i % 5 == 0: word += "Buzz"
        out.append(word or str(i))
    return out

3. Pan and scale (overlay-center)

In overlay layouts, the text floats over a full-width sticky.

scale-by="2" scales the sticky by a factor.

pan-to moves it with a CSS translate. Here it moves to the top-left corner.

And now to the bottom-right.

Back to the full view.

4. Spacing, swapping stickies and live progress (overlay-left)

Use the spacer shortcode to add scroll distance between triggers.

Point a trigger at a different id to swap stickies.

Add the .scale-to-fill class to a sticky to grow it to fill the space.

Closeread exposes scroll state to OJS. Variables include crActiveSticky, crTriggerIndex and crTriggerProgress. Scroll slowly here.

Sticky one: plain Markdown can be a sticky.

Sticky two: so can a blockquote, table, image or figure.

🌲

md`**Active sticky:** ${crActiveSticky}

**Trigger index:** ${crTriggerIndex}

**Progress through this trigger:** ${Math.round(crTriggerProgress * 100)}%`

Text after the final section scrolls normally again. To see trigger and sticky outlines while you build, set debug-mode: true in the header.