Reference

Document Metadata

Document-wide options under the closeread-html format key in YAML format.

debug-mode

Toggle debug mode.

format
yaml
parent key
format:closeread-html
possible values
  • false
  • true
remove-header-space

Removes the space for the header at the top of the document. Useful when you want the document to start immediately with a closeread section.

format
yaml
parent key
format:closeread-html
possible values
  • false
  • true
layout

Define the relative positioning of the narrative and sticky columns in all sections in the document. Is overridden if a section specifies its own layout.

format
yaml
parent key
format:closeread-html:cr-section
possible values
  • sidebar-left
  • sidebar-right
  • overlay-left
  • overlay-center
  • overlay-right
No matching items

Closeread Component Options

Closeread takes advantage of the Pandocs’s fenced div and bracketed span syntax to pass options to sections, triggers, and stickies. The fenced div syntax allows you to wrap block content (a figure, a paragraph, etc) in a div and pass it one or more identifiers, classes, and attributes.

:::{#myid .myclass myattribute="something"}
< block content like a figure or paragraph >
:::

The bracketed span allows you to wrap inline content (a word or phrase, a citation, etc) in a span and pass the same information.

Hello world [@cr-hello]{#myid .myclass myattribute="something"}

Identifiers start with #; classes start with ., and attributes have a key / value pair separated by = and no spaces. You can assign to a div one or more of each of these (though they must be supplied in identifier-class-attributes order) as long as each is separated by a space.

Style Options

Options used to control various visual aspects of a Closeread document.

narrative-background-color-overlay

The background color used for narrative text blocks in sidebar layouts.

format
pandoc attribute
possible values

a CSS color value

narrative-text-color-overlay

The color of narrative text in overlay layouts.

format
pandoc attribute
possible values

a CSS color value

narrative-background-color-sidebar

The background color used for the narrative column in sidebar layouts.

format
pandoc attribute
possible values

a CSS color value

narrative-text-color-sidebar

The color of narrative text in sidebar layouts.

format
pandoc attribute
possible values

a CSS color value

narrative-border-radius

The border radius of narrative text blocks in overlay layouts.

format
pandoc attribute
possible values

a CSS length or percentage value

narrative-overlay-max-width

The maximum width of narrative text blocks in overlay layouts.

format
pandoc attribute
possible values

any value allowed by the CSS max-width property

narrative-overlay-min-width

The minimum width of narrative text blocks in overlay layouts. It’s generally best to leave this one alone: setting it can cause mobile layout issues.

format
pandoc attribute
possible values

any value allowed by the CSS min-width property

narrative-outer-margin

The margin pushing narrative content in from the left (on overlay-left layouts) or right edge (on overlay-right layouts).

format
pandoc attribute
possible values

a CSS length or percentage value, or auto

narrative-font-family

The font(s) used for narrative content.

format
pandoc attribute
possible values

a comma-separated list of family names or generic names

narrative-font-size

The font size used for narrative content.

format
pandoc attribute
possible values

a CSS color value

poem-font-family

The font(s) used for lineblock poems.

format
pandoc attribute
possible values

any value allowed by the font-size property

section-background-color

The background color used for Closeread sections.

format
pandoc attribute
possible values

a comma-separated list of family names or generic names

narrative-sidebar-width

The width of the sidebar. Defaults to 1fr: the sticky content is 2fr in sidebar layouts, dividing the page 1:2 by default. You can adjust this ratio with a different fr value, a fixed value, or a combination of the two using minmax().

format
pandoc attribute
possible values

a CSS length, percentage, flex or other value compatible with grid-template-columns

No matching items

Section Options

A Closeread section is a div with the class cr-section that contains stickies and triggers.

layout

Defines the relative positioning of the narrative and sticky columns. Overrides any layout set in the document metadata.

format
pandoc attribute
possible values
  • sidebar-left
  • sidebar-right
  • overlay-left
  • overlay-center
  • overlay-right
No matching items

Sticky Options

A sticky block is a fenced div tagged with an identifier prefixed with cr-.

#cr-*

Identify an element as a sticky element.

format
pandoc identifier
possible values
  • #cr-*
No matching items

Trigger Block Options

A trigger block is a div with the focus-on attribute to trigger effects on a particular sticky element. Paragraphs allow the use of the citation syntax (@cr-mysticky) as a shortcut to wrap the paragraph in a div with the focus-on attribute.

focus-on

Used in a div to indicate which sticky to focus on. Will remove the transparency from the sticky and use it in any focus effects.

format
pandoc attribute
possible values
  • cr-{sticky-name}
highlight

Highlight a single line number, a set of line numbers (separated by commas), or a range of line numbers (separated by a hyphen). Works to highlight both code cell stickies and line blocks stickies. Within a line block sticky, you can additionally highlight a single span contained in that line block with an identifier prefixed with cr- or a set of spans separated by commas.

format
pandoc attribute
possible values
  • "3"
  • "3,7"
  • "3-7"
  • "cr-span1"
  • "cr-span1,cr-span2"
No matching items

Keyboard Hotkeys

While viewing a Closeread document in a browser, you can press certain hotkeys to toggle features.

Hotkey Effect

Toggle presentation mode

Scroll to next trigger

Scroll to previous trigger