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

Dominik Herrmann

Otto-Friedrich-Universität Bamberg

https://github.com/UBA-PSI/psi-slidesThe four views are built from this one file.
outline

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. 5Panels: the card grown to the frame
  6. 6A dock at the frame's edge
  7. 7Beats below the top level
  8. 8A heading that stays off the slide
principle

None of this is in the 1.0.0 release

What 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.

The cover, and the slide that closes it

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

A name and a sentence carry the idea; they do not carry the shape it makes. Each of the ten is shot from a real build in the gallery.

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.

Dividers carry their own 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

The six are in the same gallery as the covers, under the same rule: a deck settles on one and wears it at every part.

principle

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.

Cards, rows and panes

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

Revealing a picture

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.

A picture that retreats

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 and a reveal segment both fade in, and neither moves anything: the segment has its box in the text from the first beat, and the overlay has its cell over the picture. What from adds is the number - a segment takes the next beat in order unless it is written --- from N, where an overlay says which beat it waits for and nothing else can reach it first.

A picture that covers the words

A title can be covered
as well as added to.

Where the picture sits, and what it is veiled with

Five groups of words go in the braces after ::: backdrop, at most one from each, and the first of every group is the default.

  • fill
    cover
    contain
  • crop
    middle
    top
    bottom
  • scrim
    veil
    clear
    invert
  • focus
    sharp
    blur
  • 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, two shapes. Aim two overlays at the same corner and they stack rather than landing on top of each other. A panel is the card grown to the frame - the next part shows the three compositions - and third / half are a band's height.

  • place
    center and the eight compass points
  • ground
    paper
    ink
    accent
    clear
    glass
  • width
    narrow
    standard
    wide
    full
  • shape
    card
    panel (an edge or center, never a corner)
  • height
    snug
    third
    half (bands only)

Panels: the card grown to the frame

A column the full height of the slide

The picture stays sharp beside the words

{.left .glass .panel .standard} is a column, not a card. It reaches the top and the foot of the frame, its width is a share of the slide, and the glass blurs only what is behind the words.

The backdrop is {.cover .clear}: no veil, because the panel sets the words off. A .clear picture under words outside a panel, an overlay or a dock earns the linter's text-on-picture.

A band across the foot, a third high, with a beat inside

{.bottom .ink .panel .wide .third} is a band the whole width and a third of the height, the words centred in it and capped at the wide measure.

A --- inside the panel is a beat: this line arrives on the first press, and the band was this tall from the start.

The whole frame veiled, and a card on top of it

Words in the middle of a veiled picture

{.center .glass .panel} covers the frame. A corner with .panel is refused: a panel runs along one edge, or takes them all.

A card lies on top of a panel.

A dock at the frame's edge

A dock is part of the frame, and the text yields to it

An overlay lies over the slide; a dock takes its room from it. The list on the left is one ::: dock {.left .every} written under this part's # heading, and every chunk of the part carries it - the item the room is on lights up, because each entry is a link to a chunk's {#id}.

Four edges, the overlay's grounds, three widths. A left or right dock is a column the full height of the slide and the text column narrows beside it; a top or bottom dock is a band across the whole width and the text sits above or below it. A chunk that writes its own ::: dock replaces the inherited one for that slide.

The text column narrows, and two columns still fit beside a dock

A .wide chunk keeps ::: cols 2 beside the inherited dock. The chunk reserves the dock's track as padding, so the content column is what the slide leaves - and the linter says when that falls under the measure (dock-narrows-measure) or under what a column needs (layout-too-narrow).

The dock's ground is tint by default: the card row's panel tint, five per cent of the ink on the paper, which is what gives a column on the slide's own paper an edge. paper has none there and stays a choice for a dock over a picture; ink is the loud version.

The dock's type is the overlay's, 0.92 of the slide's and zoomed with it, but its track is a share of the frame and does not move: a dock is part of the frame, and a running list that shifts sideways per slide is not a frame.

A band replaces the inherited column

This chunk writes ::: dock {.bottom .accent .third} of its own, so the part's list steps aside for one slide and a band a third of the slide high carries the line under the words.

A band at the head, and the chrome moves to the foot

::: dock {.top .accent} is a line above the words, as wide as the slide and as tall as its own text. The slide number and the note button, which live at the head, move to the foot under it.

A dock held to a beat arrives into a track kept free

from 2 holds this remark back until the second beat. The text column has been narrow from the start, so nothing moves when the dock slides in - the rule an overlay card follows, kept here because a slide that reflows under the room's eyes reads as a fault.

The first beat shows this line.

The second brings the dock.

The dock's words

Four edges, six grounds, three widths, three heights, two scopes. One dock per slide; a #id link in the body is the live marker.

  • edge
    left
    right
    top
    bottom
  • ground
    tint
    paper
    ink
    accent
    clear
    glass
  • width
    narrow
    standard
    wide
  • height
    snug
    third
    half (bands only)
  • scope
    once
    every (under a # heading only)

Beats below the top level

Six beats in source order, and nothing moves

A --- inside a pane, a card row or a dock is a beat on the slide's own counter. Left one, left two, right one, right two, then the card row, then its third card - the order they were written in, top-level and nested mixed.

Left one. A nested beat keeps its box: the pane stands at its final height from the first press.

Left two. So nothing above or beside it moves when it arrives.

Right one. The right pane waited for the third beat, because its first line is a ---.

Right two. The fourth.

  • Fifth beat. The row is a top-level segment.
  • Still the fifth. A top-level segment reserves its space too, so the chunk is as tall on its first beat as on its last.
  • Sixth. The third card had its cell from the fifth beat on.

Rows that arrive one at a time

A --- between two rows shows the second on the next press, and the first does not move: the block is laid out with both rows from beat 0.

  • Nestedbeats keep their place, so the slide is quiet under them.
  • Top-levelsegments do the same, so a chunk is as tall on its first beat as on its last. One rule, whatever depth the mark sits at.

A 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 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.

The two revealed photographs in Part 4 are the case the class was written for: each is a picture and a speaker note, each would have read wrong with a line of type above it, and each is still a row in the search index.

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

A source.md written before any of these constructions builds exactly as it did before.

https://github.com/UBA-PSI/psi-slidesThe four views are built from this one file.