Harlowe Story Format for Twine

The Harlowe story format for Twine provides a number of built-in features to make it easier to enhance your stories.

The Harlowe story format for Twine provides a number of built-in features to make it easier to enhance your branching scenarios, even if you have no experience with HTML, CSS, or Javascript. The toolbar makes these features easier to access, providing simple ways to format text, set conditional states, or manage variables. However, Harlowe has so many options that it has its own learning curve. I am by no means an expert in everything possible in Harlowe, but this post explains some basics and how to get started.

Getting Started Formatting Text in Harlowe 3.3.3

This guide was originally written for Harlowe version 3.2.1. Twine and Harlowe were both significantly updated in July and August 2022. This guide is for Harlowe version 3.3.3. Note that Twine doesn’t automatically update itself; you have to download and install the newest version yourself.

Consult the full documentation for Harlowe for much more detail than I will cover in this post. However, I find the official documentation assumes some prior experience and background, rather than being a step-by-step guide.

If you’re just getting started in Twine, you may want to start with my post on how Twine makes branching scenarios easier. After you start with that, you can return to this post for information on styling the story.

If you’re curious about the differences between versions, I also posted my first impressions of Twine 2.4.1.

Harlowe Toolbar

The Harlowe toolbar gives you access to a number of features without having to know how to code them.

Screenshot of the Harlowe toolbar
Harlowe toolbar

In past versions of Harlowe, a passage appears with a title, tag, and space for the passage text. If your version looks like this, you should download the update.

Older version of Harlowe with no toolbar
Older version of Harlowe with no toolbar

Formatting text

Formatting text with bold, italics, and strikethrough styles works like other text editing programs. You don’t have to remember the markup language, but it will appear that way in the passage.

Harlowe text style options

If you want to change the overall look and feel of the whole story, it’s a little more complicated than just formatting a short passage of text. For example, the default styling for Harlowe is a black background with white text. I don’t personally like this, plus I think the blue links are hard to read. (WebAIM’s color contrast checker puts it at 4.33:1, so it fails the accessibility check for normal size text.)

Screenshot of a branching scenario with a black background, white text, and blue links.

Text and background color options

I’d rather have a white background with black text so the links are more readable.

  1. Create a new passage. This passage doesn’t need to connect to any other passages.
  2. Add the title “Style” or something easy to identify.
  3. Select the Colours button on the toolbar.
Harlowe toolbar with a button pointing to the Colours button (a circle with rainbow stripes)
  1. Change the text color and background. I used the default black for the text and a slightly off white (#fcfcfc) for the background.
  2. Set the Affect to “The entire page.” This is what makes the change format the whole page instead of just a passage.
  3. Select Add.
Harlowe option dialog box. Text color, background, and what is affected (the entire page). A preview of the text formatting appears at the top.
  1. Remove the placeholder passage text if needed.
  2. Add the tag “header” to the passage. This tag adds the style to every passage in the story automatically. (Note: tags are case sensitive. “Header” is not the same as “header.”)

Enchant macro

If you follow the steps above, Harlowe will create this enchant: macro. A macro is basically a little code snippet in a Twine passage. The “enchant” macro makes a persistent change to something in a passage (in this case, the text and background colors).

Screenshot of the style passage in Twine with generated formatting code.

(enchant:?page,(text-colour:black)+(background:#fcfcfc))

The results of this macro are a story with a white background and black text. I didn’t change the link color (although that is also possible with an enchant macro), but the contrast of the blue against the lighter background makes it easier to read.

Screenshot of the passage with new formatting (black text and blue links with a white background)

Could you accomplish the same thing without using the toolbar? Yes! You could enter the same “enchant” code shown below to make these adjustments. However, if you aren’t used to using Twine, this format may be hard to remember. That’s what Harlowe tries to accomplish; making it easier to generate these codes without consulting the documentation each time.

(enchant:?page,(text-colour:black)+(background:#fcfcfc))

More in Harlowe

This is just the very beginning of what’s possible in formatting in Harlowe. If you’re interested in learning more about formatting, check out Visual Design for Scenarios in Twine. In that post, I explain step-by-step how to format a story like the one below without needing any CSS (using just a little bit of HTML code for the images).

Twine story with an illustrated black woman on the right and a scenario intro on the left. The Continue link at the bottom is a button with rounded corners.

The Harlowe toolbar also gives you access to features like advanced links, variables, and other macros. For example, the scenario above includes scoring and shows different feedback messages depending on the choices you make. All of that was done through Harlowe’s macros, without any Javascript or other code.

Read more about Twine

Originally published 5/4/2021. Updated 12/8/2022.

14 thoughts on “Harlowe Story Format for Twine

  1. my goodness! This is perfect, I wanted to create a story with a black background and a green text like in the firsts interactive stories and I thought I would have to change the passages each time, this has saved me so much time! Thanks

    1. The section where the text is is called the “passage” in Harlowe.

      In theory, you should be able to follow the directions above and just adjust the opacity slider. Despite the wizard having an option for opacity, it doesn’t seem to be working for me. I tested out the enchant macros a couple of ways.

      Instead of using the enchant macro, try adding CSS to the stylesheet instead. This will give you a slightly transparent gray.

      tw-passage{
      	background-color: rgba(34, 34, 34, 0.6);
      }
      

      I found this solution in an older discussion. While that’s from a while back, it still seems to work.
      http://twinery.org/questions/40869/fairly-transparent-background-behind-story-using-harlowe

  2. Hey so, here is my thing. Can you please tell me how to open the Harlowe tool bar in 2.4.1 is theres a keyboard shortcut to it. Im tryna look for it but it doesn’t show up. There used to be a arrow that opened the toolbar but since the enw update, idk how to turn the harlow passage toolbar.

    1. Harlowe 2.4 was a significant change to the interface. Not everyone is happy with it, and I expect some more tweaks in the next few versions.

      In the new format, in the top menu, select Twine > Story Formats. Can you verify which version of Harlowe you are using? It should be Harlowe 3.3.1. If not, that’s probably the issue.

      Personally, in the new layout, the passage opens on the right with the toolbar immediately available. I don’t have an arrow, but all the tools are visible by default.

  3. I have Twine 2.3.14 and Harlowe 3.2.2 but I don’t have the toolbar. Can’t find anything about it online. Do you know if I can fix it somehow?

    1. Two things you can check:

      1. On the main page of your Twine application, select Formats. Check if Harlowe 3.2.2 is the default story format or not.

      2. Open your story. Select Change Story Format. If you originally created it in an older version of Harlowe or a different format, that’s probably still in use. Change it to Harlowe 3.2.2.

      If neither of those work, let me know and I’ll see if I can figure out something else to test. Fingers crossed!

Leave a Reply