compare

Two screenshots of the same view, before and after a change. They're titled Before and After unless they set their own title, and their notes are numbered on from one to the other.

Playground

PreviewCode

Before

1

After

2

1 / 2

The default. The two screenshots sit side by side and stack on a narrow screen. They zoom as one gallery.

A note with side="left" or side="right" joins the numbered list under its screenshot. Beside it, the note would press against the other screenshot and shrink its own. A note with side="top" stays above.

With mode="slider", the two screenshots share one frame: Before shows left of a divider, After right of it. Use it when the change is small and in one spot, so the reader sees it at full width.

• Drag anywhere on the pair to move the divider, or focus its handle and use the arrow keys.
• A click that doesn't drag zooms the pair.
• Side notes join the numbered list, since an arrow would cross the divider.
• Without the script, the two screenshots stack.