This is the first in a probable series of posts as we muddle our way through publishing adventures as web pages. Today we will talk about H Y P E R T E X T.

A web page is our second favourite format for publishing and using RPG adventures. Paper booklets are number one: they’re a superior technology for quickly navigating through a document, we enjoy the tactile aspects of gaming (rolling dice, pencils, erasers, books), and we prefer to keep glowing rectangles away from the table whenever possible. But for convenience, accessibility, ease of publishing, and adaptability, HTML is hard to beat. It’s cool to be able to run an adventure for a bunch of friends from your phone.

This post assumes a basic working knowledge of writing HTML and CSS. Teaching web design is beyond us and there are too many excellent, free resources available online to list here. Laurel Schwulst’s Basics of HTML and Basics of CSS are great introductions. For information specific to adventure authoring we recommend Goblin Archives’ Annotated Archive of Game Design Resources, Nate Treme’s Making an HTML Dungeon, James Chip’s Creating ePub and html content for ttrpg designers, and Luke Gearing’s Using Markdown and Pandoc to Make RPG Documents for Free.

Here’s a couple things we’ve figured out or are playing with right now. We’ll use snippets of code from Swamp Renewal as examples.

Hypertext

(Return my future self to the smooth scrolling section)

Linking is HTML’s killer feature, and it makes sense to link every reference you can in your dungeon, especially if your page is long. Every mention of a location, a random table, a creature, can be linked to its definition within the document.

If you are writing in markdown, when you convert your text to HTML your headers will probably be assigned unique IDs automatically:

<h3 id="1-swamp-port">1. Swamp Port</h3>

You can point to these IDs with anchor links:

The golem carries the lumps of peat south, across the bridge to <a href="#1-swamp-port">1. Swamp Port</a>, where it stacks them to dry.

Using reference links when you write will keep your markdown readable and avoid repetition.

Here is the above link as written in our markdown document:

The golem carries the lumps of peat south, across the bridge to [1. Swamp Port], where it stacks them to dry

And here is the reference we include at the end of our text:

[1. Swamp Port]: #1-swamp-port

Our final markdown document for Swamp Renewal makes heavy use of internal linking and reference links. If you’re interested you can download the .md file at itch.io.

We haven’t tried this yet, but we like the idea of weaving our dungeons into the web by linking out to sites like Wikipedia and other relatively stable, open sources for visual or background references. We also like the idea of linking to other adventures that exist on the web – a distributed megadungeon. Or a hex crawl where each hex is linked to a location written by a different author, on a different website.

Smooth Scrolling

Most browsers will scroll smoothly to anchor links on a page with this simple CSS declaration:

html { scroll-behavior: smooth; }

Here’s an example: Take me to the Hypertext section in this post.

Safari, the default browser on Macs, iPhones and iPads, does not currently support smooth scrolling by default. Happily, there is a very easy to implement plugin to enable it on your web pages.

We find smooth scrolling to be more useful than just a nice piece of visual flair. Seeing the page scroll, rather than abruptly jumping from link to link, helps to keep the reader oriented within the page.

Also

We want to see more adventures and dungeons on the open web and more experiments. We have more scribbled notes about print stylesheets, marking up maps, navigation menus, and hosting. Let’s see how we go.