Twine for Beginners: Styling Text

Twine offers several handy options when it comes to displaying text in particular ways. From straightforward bold or italics to more eye-catching animated effects, there are a whole range of features built right in and this tutorial will show you how to use them.

The following techniques are all very simple, but if you’ve never used Twine before then you might like to start off with this tutorial which offers a very basic introduction to it. You might also be interested in my tutorial covering how to colour text in Twine, which this one will also touch upon.

Much of this tutorial is so simple that you could probably get the hang of it simply by reading through the example piece, Snazzy Susan and the Majestic Markup. However, the tutorial below will go into slightly more detail as well as linking to other guides and resources, so if you find that you’re struggling with anything then do pop back.

How to produce bold and italics (and more!):

Twine doesn’t have buttons for bold, italics, etc. like you’d expect in a word processor. Instead, you write special characters around the text you want to format differently. //italics// will produce italics while ”bold” will produce bold.

If you’ve ever used <i> and </i> to make text appear in italics online, it’s exactly the same principle (and actually that’ll work in Twine too). You can find a complete list of your options in the Harlowe manual (as Harlowe is the Twine story format covered by these tutorials).

The (text-style:) macro below offers another method for producing bold and italic text, but this way is dead simple and helps avoid cluttering things up too much so I figured I’d include it first.

How to add cool effects:

As well as simply changing the colour of text, you can make it do a variety of other interesting things, some of them quite unusual.

A few of the effects are animated (and I’m too lazy to create a gif to show you here), so do check out the example to see how those behave. The macro for producing these effects is exactly as simple as the one for colours. To get the “emboss” effect, for example, you would write this:

(text-style: “emboss”)[Some text you want to appear embossed.]

To get the other effects, simply replace “emboss” with the relevant style name. You can find the complete list in the Harlowe manual, and they all appear in the example as well:

If you’re more comfortable copying and pasting these macros rather than typing them, you can import the entire example story into Twine and open it yourself by following this tutorial.

How to combine effects and colour:

This section will draw pretty heavily upon my tutorial on colouring text in Twine, so if you’d like to know more then that’s the place to go.

In some ways trying to style text with multiple macros can be a nuisance, and in others it opens up a lot of nifty extra options. The key thing to remember is that the order in which you write them can be significant, and if your text doesn’t look the way you want it to then it could be worth shuffling things around. For example, this…

(text-colour: “cyan”)[(text-style: “outline”)[TEXT WITH OUTLINE]]

looks as though it should do the same thing as this:

(text-style: “outline”)[(text-colour: “cyan”)[TEXT WITH OUTLINE]]

However, what you actually get is:

This is (presumably) because the default style for outline is black text with an outline of whatever the text colour would otherwise be. In the top example, Twine applies (text-colour: “cyan”), which colours the outline, and then (text-style: “outline”) produces the inner text in its default black.

In the bottom example, however, things work the other way around. First, (text-style: “outline”) produces text with an outline in the default white colour (as nothing different was specified at that point), and then (text-colour: “cyan”) produces the cyan text you’d expect.

I’m not 100% certain this is the reason why these two macros interact in this way – I notice that in the Harlowe manual the example for outline is actually white with a black outline – but the crucial thing to bear in mind is that you may have to repeat certain macros outside and inside (text-style:) to get things looking the way you want them to. This is a hassle if you expect (text-style: “outline”) to maintain your usual text colour while adding an outline around it, but actually opens up the options of doing things like this:

(text-colour: “cyan”)[(text-style: “outline”)[(text-colour: “red”)[TEXT WITH OUTLINE]]]

(text-colour: “red”)[(text-style: “outline”)[(text-colour: “cyan”)[TEXT WITH OUTLINE]]]

…which produces this:

The extra typing might be a hassle, but the extra control over the end result is handy to have. Not all (text-style) options allow for this sort of thing, and there’s often a degree of trial and error involved in getting things looking the way you want, but the range of effects available makes the experimentation worthwhile. (text-style: “smear”) in particular is one to play with:

(text-colour: “red”)[(text-style: “smear”)[(text-colour: “cyan”)[MULTICOLOUR SMEARED TEXT]]]

Any of the techniques used to select colours in my other tutorial will work just as well for this sort of thing, and (text-style: $variable) will allow you to set $variable to outline, smear, rumble, etc. to alter the style of any text you like mid-game. The only limit is your imagination!

How to write text verbatim:

One final thing that’s obviously absent from the example is how I’m writing the code to produce special-looking text without it simply making other text look special.

In the screenshot above, there are two sets of double forward slashes and two sets of double apostrophes (which make all the text between them appear italicised and bold respectively). However, the second set of each are also enclosed within grave marks ( ` ), which cause Twine to produce that text verbatim (exactly as written). Here’s how it appears when the game is run:

Basically, //italics// without a ` either side becomes italics while `//italics//` including that ` either side becomes //italics//. This works with absolutely anything that would ordinarily appear differently in the editor to in the finished game.

Summary:

Twine’s (text-style:) macro gives you a very easy way of adding interesting text effects to your work, and if you combine it with (text-colour:) then you’ll have even more options at your disposal. There are even more macros with similar effects – (text-rotate:) is one to look into – but those are beyond the scope of this tutorial. Have a go for yourself!

If you do have any questions, feel free to ask in the comments below. You don’t need to set up an account or anything, but do bear in mind that if you don’t provide an email address then you can’t be notified of replies.

Finally, if you’ve found this tutorial useful then you may be interested in the others in my Twine for Beginners series.

One comment

  1. Pingback: More places for Twine help :) – Electronic Literature & Digital Writing [2]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.