Twine Resources

So you want to port with Twine. There are a ton of resources and tutorials out there. Here are just a few:

  • Ana Anthropy helped to popularize Twine a few years ago. Her tutorial was written with the original version of Twine in mind, but the principles are the same for the newest version of Twine.
  • Adam Hammond has a thorough tutorial for the latest version of Twine.
  • Allison Parrish (who wrote the great Tracery tutorial we used earlier in the semester) has an introduction to Twine too.
  • And finally, here is the guide (by Jon Saklofske) that I demonstrated in class, showing various macros at work.

Customizing Tracery Projects

Changing Fonts

To change the font of your project, you have to edit the style.css file.

1. First, pick your font. The easiest thing to do is to pick a Google Web Font—these are fonts Google makes available for embedding on web pages. Here’s the complete list:

2. Next, open up the style.css file in Brackets or your preferred text editor. Make the following line the first line of style.css:

@import url('');

Replace Open+Sans with the name of the font you want to use. Be sure to replace any spaces in the font name (if it’s more than one word) with plus signs. Like:

@import url(';

3. Finally, you have to add another line to style.css. In the body section of the file, add this line:

font-family: Gloria Hallelujah;

Replace “Gloria Hallelujah” with the name of the font (here you need to use spaces if the font name is more than one word).

Save and reload the project in your browser, and you should see the new font take effect. If you have trouble, Google “Google Web Font CSS” and you should find some good tips.

Adding Images

In order to add images, you have to use the <img> HTML tag in your index.html file. See here:

It’s hard to be more specific than this, because it depends on where you want your image to show up. If you want your image at the top of your page, you can add an image right below the <H1>Title</H1> tag.

Another way to include images is to use the <img> tag directly in the Origin rule in grammar.js. In fact, you can use Tracery to randomize which images show up in your project.

Whatever image(s) you want to embed should also be placed in the same folder as your index.html file.

Other Formatting

You can use bold, italics, and even paragraph breaks in your project by using the appropriate HTML tag in the Origin rule. For example, if your project takes the form of a multi-paragraph announcement, you could do something like this in grammar.js:


The <p> tag forces a paragraph break between the #firstParagraph# and #secondParagraph# rules. The <em> tag turns on italics for the #sincerely# rule, and the </em> turns the italics off.

Tracery Tips

This posts echoes what I sent out in email this morning:

  • I’ll be in the library from 4-5:30 on Saturday 9/9 to answer Tracery questions, brainstorm ideas, or troubleshoot problems. Drop by if you want help! Look for me on the main floor, somewhere near the circulation desk.
  • I created another set of template files for you to work with. The original set available for download from the assignment page was the giant Tracery grammar for Don’t Drink the Water. It can be overwhelming to sort through what’s going on there. So I created a simpler grammar. Links to both sets of templates are on the assignment page now.
  • While we played with editing Tracery grammars in the online Visual Editor in class on Wednesday, I didn’t explain how to edit files in the downloadable template set. So, here’s what you do:
  1. Download either set of template files (probably start with the simple grammar).
  2. Unzip the download file onto your desktop or some other folder on your computer.
  3. Test the downloaded Tracery project by opening up the index.html template file in a web browser like Chrome. In Windows, use Control-O to open a file from Chrome. In Mac, use Command-O while in Chrome.
  4. The project should open up and generate text. Press the link to regenerate new text.
  5. To actually edit the underlying Tracery grammar, open up grammar.js in a text editor like Brackets or Atom.
  6. Make a few changes in the grammar and save the file. (Be sure to keep your commas, brackets, and quotation marks in the right places!)
  7. Switch back to Chrome and reload the index.html with Control-R (Windows) or Command-R (Chrome). You should see your changes take effect.
  8. If your changes don’t show up after a couple rolls, make sure you actually saved the edited grammar.js file and truly reloaded it in the browser.
  9. If the page is entirely blank in your browser, then there’s an error in your grammar.json file! Go back and make sure all your commas and so on are in place.
  10. In addition to editing the grammar.js file, you should edit the index.html file (using the same text editor) and update it to reflect your own project’s needs. You can also edit the style.css file (in the same text editor) in order to change fonts, font sizes, colors, and other visual elements of the page.