Things I Discovered while Working with Twine [Harlowe]

So, I’ve been playing with Twine 2 for a few days now. It looks like an okay tool to create stories. There are places in the Internet where I can get docs, tips, tricks, and things like that, but there are still not many. So I’m starting a new Series on tips and tricks on Twine, specifically the Harlowe story format.

In this part, I’ll start with something I found on the CSS side of a Story. The Harlowe documentation has a good example on how to use the css: macro, but it doesn’t have the example that I needed: What if I want to have more than one styling?

Of course, if you know CSS, the answer is simple. Semicolons.

(css: "color:red")[This text is in red]
(css: "font-weight:bold")[This text is bold]
(css: "color:red; font-weight:bold")[This text is red and bold]

On the Javascript side, I’m trying to find a way to make a custom script that can take a class name and generate an enclosing span around a piece of text, so that only that piece of text has the class, instead of the entire Passage or Story.

I ended up writing a custom script like this.

var classSpan = {
  handler: function(place, macroName, params, parser) {
    var $scene = '<span class="' + params[0] + '">"' + params[1] + '"</span>'
  },
  
  init: function() {},
};

However, it looks like Harlowe’s Macros object is private (or something) because I can’t call Macros.add() to make the custom macro available for my story. Bummer.

We’ll see if I have anything else to add. Until next time, cheers!

Leave a Reply