A slide is a frame, and the frame can carry more than a column of text.

Slide Decoration

What a slide can carry besides a column of text

What this lecture shows

Every way psi-slides has of decorating a slide, each one used on the slide that describes it.

  1. 1The cover, and the slide that closes it
  2. 2Dividers carry their own slide
  3. 3Cards, rows and panes
  4. 4Revealing a picture
  5. 5A heading that stays off the slide

None of this is in the 1.0.0 release

Everything this lecture shows was added after the 1.0.0 release, so the archive on the releases page does not have it and a lecture that uses it will not build against that download.

What you need instead is the repository: a clone, or Download ZIP from the project page, and the build.js inside it. The source format is frozen from 1.0.0 onwards, so these constructions may still change before they are tagged.

Part
  1. 1The cover, and the slide that closes it
  2. 2Dividers carry their own slide
  3. 3Cards, rows and panes
  4. 4Revealing a picture
  5. 5A heading that stays off the slide

All ten covers are in the gallery, each shot from a real build. This deck wears quote.

Ten ways to open a lecture

cover: in the frontmatter picks one of the ten below, ordered by how loudly the opening slide announces itself rather than alphabetically.

  • classic
    the lower-left third, all text. The default
  • masthead
    a nameplate on top, credits under a rule at the foot, a paragraph between
  • stack
    the title block centred on both axes
  • display
    the title set to fill the slide
  • panel
    the words in the page colour on a full field of the theme's accent
  • quote
    the talk opens on a claim, and the title is the attribution under it
  • split
    text on the left, the picture running off the right edge
  • hero
    the picture is the slide, the words at its foot over a dark gradient
  • beside
    the picture inset to the right of the title
  • above
    the picture on top, the title centred in the band below

Three keys the cover reads

cover-image: names the picture, and four of the ten draw one: split, hero, beside and above. On the last two it is only the fallback – they take whatever you write under the ## title: heading, so a ::: draw can be the cover.

cover-ratio: is how much of the slide the picture takes, as a percentage between 15 and 75. Only the three that divide the slide read it – split, beside and above. A percentage and not a W:H ratio: the shape of the frame comes from the projector, and this splits it.

cover-align: puts the block of text at the top, the middle or the bottom. The seven compositions that leave the block any freedom read it.

Set either of the last two keys on a composition that has already settled the question and the build stops with an error rather than ignoring the line.

quote draws no quotation mark

A sentence set alone on a slide with a name under it already reads as a quotation, so there is no mark: no hanging curly quote, no glyph behind the words, no rule beside them.

The claim is what you write under the ## title: heading. A quote cover without one fails the build.

The last slide closes the arc

## closing: draws the last slide in whatever composition cover: names, so the room sees the shape the lecture opened with.

What it carries is different: your own heading, sub-heading and text, and neither the presenter line nor the info block – the room learned who is talking and where an hour ago. The last slide of this lecture is one.

Part
  1. 1The cover, and the slide that closes it
  2. 2Dividers carry their own slide
  3. 3Cards, rows and panes
  4. 4Revealing a picture
  5. 5A heading that stays off the slide

Six treatments, every one quieter than the cover

A divider has one job: to say that a new part starts here, and that it is part of the thing you are already in. One that can be mistaken for the title slide has failed at it.

  • plain
    the heading alone. The default
  • tinted
    the whole slide takes the theme's accent at 12%. The ten-metre signal
  • rule
    the heading between two rules. The one that survives a monochrome print
  • card
    the heading on a panel, in the vocabulary the card rows use
  • number
    a large counter above the heading, which steps the heading back
  • outline
    the running agenda: every part listed, this one live. Used here

What a running agenda says that a coloured field cannot

Which part starts, out of how many, and how far into the hour you are. The room meets the same list four or six times and learns the shape of the lecture from it.

That only works while the list stays the same from divider to divider, so the heading is the live item in the list rather than a second copy set beside it.

Three states, two greys

The live part is set larger and in full ink; the parts before and after it recede. What carries progress is where the live item sits as it walks down the list, so the recession only has to say not this one. The live part is a size and not a third shade: two greys read from the back of a room, three do not.

section-mark: puts a short word over the heading. This lecture writes Part. Write nothing and nothing is drawn there.

The lines under a # heading are the divider's slide

Whatever you write between a # Heading and the first ## heading under it becomes the divider's slide. Ordinary markdown is the words, a ::: backdrop is the picture, a ::: draw is the figure.

  • A blockquote
    opens the part on a quotation. Part 1 of this lecture does
  • A backdrop
    opens it on a photograph. This part does
  • A figure
    opens it on a drawing set beside the heading. Part 3 does

Those three are what a divider takes; the other directives belong inside a ## slide. The words do print, as a short paragraph under the part title. The divider slide itself never prints.

A figure divider lays out beside the heading

When a divider's body is nothing but a figure, the figure goes beside the heading – stacked, a part title, an agenda and a drawing are three blocks down one axis with nothing across it.

Prose under a heading is an opening paragraph and stays stacked, which is how the quotation divider in Part 1 comes out.

Part
  1. 1The cover, and the slide that closes it
  2. 2Dividers carry their own slide
  3. 3Cards, rows and panes
  4. 4Revealing a picture
  5. 5A heading that stays off the slide
cards 3 rows side 2:1 three containers,three jobs

::: cards makes boxes, not columns

::: cards 3 puts three boxes side by side, and an item is whole or it is nowhere. ::: cols 3 is the other thing: one flow of text the browser balances across three columns, so a paragraph can spill from the foot of one into the head of the next. Use cards for three things, columns for one long argument.

  • outline a hairline and no fill. Quieter on a slide that already carries a figure
  • panel a tinted fill and no hairline. The default
  • Never both. A grey box inside a grey border reads as a form field rather than as a card

What a card sits on

The ground word says what is behind the text, and a row wears one at a time: these two are set to accent and to the default panel, whatever their cards say. outline is on the slide before this one, and corner is a separate question.

  • accent
    the theme's own colour, with the text in the page colour on top
  • paper
    the page colour, so the card lifts off whatever is behind it
  • clear
    no box at all. The gap between cards is what separates them
  • square
    corners off, for a deck that wants no rounding anywhere
  • round
    the default
  • photo
    the card's first picture becomes its background instead of a band across its top

The row size reads the longest item

size: auto counts the words in the longest card: three or fewer sets the row large, twelve or fewer medium, more than twelve small. One size for the whole row, never one per card.

  • Measure
  • Compare
  • Report
  • Repeat

Alignment then follows the size, a single word centring and a sentence ranging left. A row that carries a second level ranges left whatever its heads measure, so the heads do not jump when the reader presses C.

One row serves two views

detail: fold is the default, so the levels under the first are in the printed hand-out and off the projection, and C switches between the two. This deck opens with everything showing, because its frontmatter says collapse: none; press C once here and the second level folds away.

  • fold
    • off the projection
    • in the document
    • C switches
  • show
    • on the slide too
  • page
    • never folds, for a level that is a paragraph

::: rows turns a card row on its side

A term in a small card on the left, its explanation beside it, several stacked. It takes the same words in braces as ::: cards, the same automatic size, the same fold and the same print rules. Only the arrangement of an item differs.

  • Anonymitycomes from the others doing the same thing at the same time
  • Unlinkabilitymeans two actions of one person cannot be tied together
  • Deniabilitymeans the record does not prove who acted

Every term gets the same column width, so the explanations line up down the slide however long the terms are.

::: side takes a ratio

::: side 2:1 splits the slide into two panes, two parts to one. Write ::: side on its own for equal panes, and ::: flip between them to start the second one. Any two numbers work.

On paper the panes stack one after the other and the ratio is ignored.

2fr 1fr
Part
  1. 1The cover, and the slide that closes it
  2. 2Dividers carry their own slide
  3. 3Cards, rows and panes
  4. 4Revealing a picture
  5. 5A heading that stays off the slide

The window walks the beats, and the picture stands still

::: backdrop dusk {cover} reveal full, right 52% gives the picture one place per beat – one press of Space – and the last place stays. Two moves come out of it: a picture that retreats to free the space the words need, and one that grows over the words and covers them.

What moves is the window, not the picture. The photograph is painted across the whole slide either way and the frame opens and closes over it, so nothing zooms or slides about while it is being revealed.

The picture retreats

and the words arrive in the space it freed, on the same press of Space.

from holds an overlay back until a beat

::: overlay {…} from 1 keeps the block off the slide until the first press of Space. One number, not a list: an overlay is either on the slide or it is not, where the backdrop's list says where the picture is at each beat.

An overlay fades in where a reveal segment simply appears. A segment is part of the flowing text, so what follows it closes up as it arrives; an overlay sits in its own cell over the picture and nothing else moves.

A title can be covered
as well as added to.

Where the picture sits, and what it is veiled with

Four groups of words go in the braces after ::: backdrop, at most one from each, and the first of every group is what you get by saying nothing.

  • fill
    cover contain
  • crop
    middle top bottom
  • scrim
    veil clear invert
  • layer
    under over

veil puts the theme's own page colour over the picture, not white, so ordinary text stays readable on a photograph in all seven themes. invert darkens the picture and turns the text light instead, which is what the divider at the start of Part 2 does.

An overlay is a block of text over the slide

Nine places, five backgrounds, four widths. Aim two overlays at the same corner and they stack rather than landing on top of each other.

  • place
    center and the eight compass points
  • ground
    paper ink accent clear glass
  • width
    narrow standard wide full
Part
  1. 1The cover, and the slide that closes it
  2. 2Dividers carry their own slide
  3. 3Cards, rows and panes
  4. 4Revealing a picture
  5. 5A heading that stays off the slide

{.bare} gives up the projection and nothing else

{.bare} keeps a heading out of the projection and leaves it everywhere else. Writing no heading at all would cost the slide, the printed document and the search index together; a talk that is a run of figures with speaker notes usually wants to lose only the first.

So ## figure: How a crawl is scored {.full #id .bare} prints the heading, indexes it, and draws nothing on screen. style: {headings: off} says the same for a whole deck. Press / and search for measurement loop: it matches this slide and the next one, and the next one carries no heading on screen at all.

The measurement loop

request page, or not Crawler Site Scoring service

A figure that walks itself

raw crawl instrumented difference a difference is a detection

A slide is a frame

and the frame can carry more than a column of text

None of these constructions changes a lecture that does not use them. A source.md written before any of them builds exactly as it did before.

overview · drag pans · wheel zooms · selects · click or O/Enter lands · / search · Esc leaves