Sideshow

2024-03-19

Edward Tufte famously loathes Powerpoint, favoring methods of presenting information that operate more like documents. I agree! The majority of the conference and meetup talks I consume aren’t IRL or even videos but slides. The majority of talks I’ve given contain material I want to reference later. Yet too often the slides are hidden away inside hostile presentation layers or (gasp!) video that make copying and deep-linking too difficult.

For two upcoming talks I set out to create accoutrements to a very simple HTML document that would provide a slide-like presentation experience in the browser while preserving the ability to scroll, search, highlight, copy, and deep link. A presentation that’s a document and a document that’s a presentaion.

I call it Sideshow.

The next time you speak to an audience, don’t let the wisdom and humor you share become trapped. Publish it on the Web as HTML and use Sideshow to present your document, both to your audience IRL and your larger, longer-term audience on the Web.

Installation

Copy sideshow.css and sideshow.js to your own Web server.

Or remix sideshow-example on Glitch.

Usage

Write an HTML document like this, with a top-level <section> element for each slide:

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="/css/sideshow.css" rel="stylesheet">
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>
    <section>
        <h1>Title</h1>
        <p><a href="/">Firstname Lastname</a></p>
        <time datetime="YYYY-MM-DD">YYYY-MM-DD</time>
    </section>
    <section id="second">
        <h1>Second slide</h1>
        <p>Slide text.</p>
        <p>More slide text.</p>
    </section>
    <section id="third" style="background: #eef">
        <h1>Third slide</h1>
        <ul>
            <li>Slide text.</li>
            <li>More slide text.</li>
        </ul>
    </section>
    <script src="/js/sideshow.js"></script>
</body>
</html>

Each top-level <section> must have a unique id attribute. The id attribute is optional on the first <section>; Sideshow won’t use it.

See the Sideshow Example for a live presentation that demonstrates a lot more markup than the example embedded above.

On desktop/laptop screens, the CSS will render each <section> at the full screen size (including when your browser enters full-screen mode) with font sizes that should be appropriate for most presentations. Font sizes can be adjusted with the usual keyboard shortcuts. On mobile devices, the CSS will set the font sizes slightly smaller so that about the same amount of content displays without adjusting font sizes.

A Sideshow presentation is, first and foremost, a regular HTML document. All of the content is visible, scrollable, searchable, highlightable, and copyable at all times. The print stylesheet removes all the vertical height trickery so the HTML document prints like a document.

Navigation

Press the left arrow key or click/tap the left third of the screen to navigate to the previous slide.
Press the right arrow key or click/tap the right third of the screen to navigate to the next slide.
Or just scroll the page.

The URL bar always has a deep link. Whether you’re navigating by scrolling or using the arrow keys or click/tap targets, Sideshow maintains a deep link to the visible content in the browser’s URL bar. Navigating with the arrow keys or click/tap targets will add entries to history (meaning the browser’s Back button will work), while scrolling will not.