Here are some answers to commonly asked Twine questions. Thank you for checking to see if your question has already been answered. If it hasn't, please visit the Twinery Help forum.

HELP!

• I opened my project and it was empty! How do I get it back?

GENERAL QUESTIONS

• How do I install some new CSS code / a new stylesheet?
• In CSS, what do the dots and number signs mean?
• How do I install some new JavaScript code?
• How can I make my Twine playable offline? / How do I import jQuery?
• How do I import a new font from my local computer?
• How do I import a Google web font?
• How do I use an image as the story page's background?
• How do I add hover text to some text in my passage?
• How do I disable the standard syntax so I can show ASCII art?
• How can the reader change a variable without navigating away from a passage?
• How do I install SugarCube?

SUGARCANE STORY FORMAT QUESTIONS

• How do I change the horizontal alignment of the text in all my passages in Sugarcane?
• How do I change the maximum width of passage text in Sugarcane?
• How do I change the width of just the text that's centered (placed in <center> elements) in Sugarcane?
• How do I remove the Sugarcane sidebar?
• How do I vertically center the text of all passages in Sugarcane?
• How do I remove the vertical line to the left of Sugarcane passages (between the passages and the sidebar)?
• How do I disable the browser's 'back' button in Sugarcane?
• How can I change the style of just one passage in Sugarcane?
• How do I change the styles for multiple, specific passages in Sugarcane?

JONAH STORY FORMAT QUESTIONS

• How do I remove all Jonah passage titles?
• How do I remove all Jonah passage titles but the current one?

NAVIGATION AND EXPRESSIONS

• How do I use a variable as the passage name in a link?
• How do I link to a passage inside a HTML block?
• How do I <<display>> a passage whose name is in a variable?
• How do I print one random text string from a set?
• How do I change the page title?
• How do I change the mouse cursor into an image?

SCRIPTING

• How do I get things in and out of a list variable?

Don't panic. This behavior has been observed in OSX Lion and may be due to Finder issues. Instead of double-clicking your Twine project in Finder to open it, open the Twine application, go to the menu File > Open Story… and open your file from there. If problems persist, please go to the Twinery Help forum.

All CSS used in a Twine project must live in a passage with the tag stylesheet. Passages that have the right stylesheet tag have a purple frame.

1. Create a new stylesheet passage by right-clicking in your Twine workspace and choosing “New Passage Here” from the context menu. (You can also make an ordinary passage and manually enter stylesheet in the “tags” input.)

2. Copy the CSS code you want to add, and paste it into the stylesheet passage you just created.

That's it! This CSS will now be available to your entire Twine project.

Note that stylesheet passages must contain only CSS code. Putting HTML or JavaScript in a stylesheet passage may cause unexpected results.

You can add as many stylesheet passages as you like, or you can keep all your CSS in one stylesheet passage–whichever is more convenient for you to use.

A dot (.) indicates a class name. There can be many elements of the same class within an HTML page. For example, a class named “smurf” would look like this in the CSS:

  .smurf { color: blue; }

And like this in the HTML:

  <div class="smurf">Clumsy</div>
  <div class="smurf">Brainy</div>

A number sign (#) indicates an id. This means it's a unique name. There can be only one element with the given id in an HTML page. For example, an id named “highlander” would look like this in the CSS:

  #highlander { color: red; }

And like this in the HTML:

  <div id="highlander">Connor</div>

If the HTML also contained

   <div id="highlander">The Kurgan</div>

you would have a problem!

(A “div” is just a general division in HTML. A nice thing about a div is that it doesn't have any effect on the contents of the tag except what's defined by the specified CSS class.)

All JavaScript used in a Twine project must live in a passage with the tag script. Passages that have the right script tag have a brown frame.

1. Create a new script passage by right-clicking in your Twine workspace and choosing “New Script Here” from the context menu. (You can also make an ordinary passage and manually enter script in the “tags” input.)

2. Copy the JavaScript code you want to add, and paste it into the script passage you just created.

That's it! This JavaScript will now be available to your entire Twine project.

Note that script passages must contain only JavaScript code. Putting HTML or CSS in a script passage may cause unexpected results.

You can add as many script passages as you like, or you can keep all your JavaScript in one script passage–whichever is more convenient for you to use.

In Twine, go to the menu Story > Special Passages > StorySettings, scroll down to “Include the jQuery script library?” and check the box beside it.

OR

Add the text “requires jQuery” to any script passage.

Doing this will install a copy of jQuery 1.11 into the built HTML file, rather than using a Google CDN reference. This means the game will be playable even without an internet connection.

In Twine, go to the menu Story > Import Font. This will open a file browser window for you to choose the file of the font you'd like to add (for example, myFunFont.ttf). Select the desired font file and click “Open.”

Now you can use the font family in the CSS of a stylesheet passage, like this:

  .passage {
    font-family: "myFunFont", sans-serif;
  }

You can also use it in HTML in a passage, like this:

  <font face="myFunFont">Some text</font>

You can do one or the other, but you don't have to do both!

Note: No matter what the name of your passage is, you must refer to the imported font by the name it was imported as.

Note: While all modern browsers support the font file formats TTF, OTF and WOFF, the font file format SVG is not supported by IE or Firefox, and the font file format EOT is supported only by IE.

Browse the https://www.google.com/fonts][Google web font page for the font you want. For a single font, you can click the little middle “Quick Use” button (a right arrow in a box). If you want multiple fonts, it's handy to add them to a collection and work with the CSS of that collection. (Details about this are available on the https://www.google.com/fonts][Google web font page.)

Once you've chosen your Google font, choose the @import tab to view the CSS code for the font. Copy this CSS code and paste it into a stylesheet passage. (See the top of this FAQ for how to make a stylesheet passage.)

Also, if you wish to use multiple fonts, you should, for convenience, add them all to a 'collection' while browing GFonts, and obtain the code specific to that collection.

Once the @import code is added to a stylesheet passage in your project, you may use it in CSS or HTML anywhere in the project.

Note: In 1.4.1 or earlier, the @import code had to appear at the very start of the stylesheet passage that came first alphabetically. In 1.4.2 the @import code can appear anywhere (Twine manually hoists it where it needs to be.)

This CSS example sets the background image to be http://www.funimages.com/images/happyLittleTree.png

  body { background-image: url("http://www.funimages.com/images/happyLittleTree.png"); }

If you've imported the image into your project, you can use the imported image syntax in your CSS:

  body { background-image: [img[happyLittleTree]]; }

CSS provides a lot of other background properties (such as background-attachment, background-position, background-repeat and background-size) that can be used as well.

Here's sample HTML for your passage:

  <abbr title="This hover text will appear on mouse over">This text is shown as usual.</abbr>

You can use the monospace syntax like so:

{{{ <<(@__@)>> }}}

You may want to look into the SugarCube story format extension. It provides click and button macros that can be used like so:

 <<click "Lose money">><<set $money -= 1>><</click>>
 <<button "Make money">><<set $money += 1>><</button>> 
 

Download the latest SugarCube zip.

Unzip the download. It should unzip into a directory named “sugarcube.”

Copy the whole “sugarcube” directory into your Twine application into the “targets” folder. On OSX, this is usually under /Applications/Twine/Contents/Resources. (To browse to the contents of the Twine application in Finder, right-click on the Twine application icon and choose “Show Contents.”)

Restart Twine, and under the menu Story > Story Format you'll now see the option “Sugarcube.”

This CSS example will change the text's horizontal alignment to the center:

  #passages { box-sizing:border-box; padding: 0 25% } .passage { text-align:center; }

Other options instead of “center” are “right” and “left.”

This CSS example sets the maximum width of passage text to 50%.

  .passage { max-width:50%; }

You can also use whole numbers (e.g. 300px will make the text container 300 pixels wide.)

This example sets the maximum width of passage text in <center> elements to 50%.

  .passage center { max-width:50%; }

You can also use whole numbers (e.g. 300 will make the text container 300 pixels wide.)

This CSS example makes the sidebar invisible and moves the main text container to the center:

  #sidebar { display: none; }
  
  #passages { margin-left: 0; }

CSS:

  html, body { height:100%; margin-top: 0 !important; }
  #passages { display:table; height:100%; }
  .passage { display: table-cell; vertical-align:middle; }

Be advised this is a bit of a hack, and it may have unexpected behavior in some custom stylesheets.

#passages { border-left: 0px; padding-left: 0; }

In Twine 1.4: Under the menu Story > Special Passages > StorySettings, uncheck the box next to “Let the player undo moves.”

The simplest way may be to inject your CSS directly in the passage to have the special style:

HTML (inside the passage):

<style>background {color: red;}</style>

Be advised using <style> tags outside of the page's <head> is technically invalid, but it's still supported by all browsers.

The other way is described directly below.

In Twine 1.4, you can add a new tag to a stylesheet passage and tag the desired story passages with that tag name. Only the passages with tagged with the class name will be affected by the stylesheet.

This CSS sample makes the passage titles invisible:

  .passage .title { display: none; }

This CSS sample makes all passage titles invisible except for the current one:

  .passage:not(:last-child) .title { display: none; }

As of Twine 1.4, you can simply write

  [[Link text|$variable]]

In Twine 1.4, you can use HTML tags freely (e.g. <a href=“”>), and you don't need to set these tags inside <html> blocks. Tag freely!

As of Twine 1.4, you can use:

  <<display $variable>>

Use the either() function:

<<print either("string 1", "string 2", "string 3")>>

You can have any number of comma-separated strings in the parentheses.

Twine code:

  <<set document.title = "Page title">>

In Sugarcane, this will only remain until you change passages. But as of Twine 1.4.1, if you put this code inside the StoryMenu passage (or StorySubtitle or StoryAuthor), then it will run every time a passage is visited.

Also, as of Twine 1.4.1, this line:

  <<set document.title = passage()>>

will set the page title to the name of the current passage (as it was in Twine 1.3.5).

Note: The page title is set to automatically match the contents of the StoryTitle passage. If you have some macros in that passage that change its contents, then the page title will also be updated.

This CSS sample will use an imported image “happyLittleTree” and give it a hot spot 20 pixels wide and 10 pixels tall, measured from the image's top left corner:

  { cursor: [img[happyLittleTree]] 20 10, auto; }

This is how to use this technique to display a different cursor image when hovering over a hyperlink:

  .passage a { cursor: [img[happyLittleTree]] 20 10, auto; } 

Note: The maximum permitted image size for a cursor is 128×128 pixels. Animated GIFs are not permitted, as IE doesn't support this.

Twine arrays are handled like standard Javascript arrays–which themselves a little strange IMO. Here's how to add something to a list (within a Twine passage):

  <<set $currentLoops = [] >>
  <<set $march = "march.mp3">>
   
  Add a parade...

  <<set $currentLoops.push($march)>>

  Now remove it...

 <<set $currentLoops.splice($currentLoops.indexOf($march),1)>>

Hope this helps, and happy Twining!