A small request for Twine authors - Safari iOS Fix

One of the things I noticed when writing Hallowmoor is that the sidebar didn’t scale with the rest of the page. Stretching the page on my iPhone resulted in the text (passages) area overlapping the sidebar, making things unreadable. I spot-checked this with some Twine IFComp entries and noticed the same thing.

By default, the sidebar div in the Sugarcane theme is set to a “fixed” position. That’s what causes the problem. It can “kind of” be a good thing if your sidebar links should always be visible and you’re playing in a full-sized browser, because the sidebar won’t move even if the story text for a given passage is long enough to require scrolling. But it looks bad in mobile Safari.

The fix is easy though. Just add a passage called anything (ex: Styles) and give it a tag of stylesheet (all lower case). Inside this passage, you can change the behavior of the sidebar div:

#sidebar { position: absolute; }

If you already have a stylesheet passage, just add that bit. You could also hide the sidebar altogether (change “position: absolute;” to “display: none;” – but then you’ll probably need to change the body and passages margins so that it doesn’t just leave a large gap on the left).

By doing this, your Twine games will be a little more playable on iPhone.


Yes, people do this at once. Put it into the default Twine template or whatever it is you use. PLEASE do.

I saw something on the Twee group on Google that got me to poking around in the Twine subdirectories.

The HTML templates for Jonah and Sugarcane (plus the two Wiki originals) can be found in .\targets. There is a folder for each template, and in those folders, a header.html. You can edit the header and make changes; for instance, to change the “share” links to open in a new window, or to change the #sidebar style to have position:absolute. You could also change other things, such as the built-in wording (change applicable instances of “story” to “game” for example) or the default font style and size.

Presumably you could also make a new folder under .\targets and create a whole new template, or a modified version of Sugarcane or Jonah if you wanted to retain the original. This might be common knowledge among Twine users, but I didn’t know, so I wanted to share, in case.