When I first launched Twine and started building a story, something that stuck out to me was the tag box on each passage.

In the beginning I just ignored the box since I didn’t know what it was for and didn’t want to screw anything up. But eventually I got too curious and looked it up. It turns out that putting a tag on a passage doesn’t do anything immediately. The biggest use of the tags is for CSS styling.

My plan for my project was to have different background images on each passage based on what was happening in the story and where the player was in the desert. Tags turned out to be a really easy way to do this. When you want some CSS styling to apply only to a certain passage, you pick a tag for it (the only constraints being that it hasn’t been used before and that it’s one word). Then in the CSS you put: body[data-tags~=”TAG”] and then anything you put in that body will only apply to passages you tagged with “TAG”.

The above is a sample from my project. In the code, I made it so that any passage tagged with “highway” would have a certain image as a background and that it would stretch in order to cover the whole page. You can do a lot more with the tag styling such as different fonts/sizes, different link and list styles, etc., but the background image was the only thing I wanted to change from passage to passage.

The only problem with this method of background images is that it takes a very long time for the code to compile and therefore loading times are long. Loading time problems combined with time constraints kept me from individualizing the backgrounds as planned.