This is an old revision of the document!
Sugarcane HTML structure
The HTML structure of the Sugarcane Story format looks like this:
<body data-tags="">
<ul id="sidebar">
<li id="title" class="storyElement">
<span id="storyTitle" class="storyElement">Untitled Story</span>
<span id="storySubtitle" class="storyElement"></span>
<span id="titleSeparator">
<br>
</span>
<span id="storyAuthor" class="storyElement">Anonymous</span>
</li>
<li id="storyMenu" class="storyElement" style="display:none"></li>
<li id="snapback">Rewind</li>
<li id="restart">Restart</li>
<li>
<a id="bookmark" title="Permanent link to this passage" href="#.0">Bookmark</a>
</li>
<li id="credits">This story was created with
<a href="http://twinery.org/">Twine</a>
and is powered by
<a href="http://tiddlywiki.com/">TiddlyWiki</a>
</li>
</ul>
<div id="snapbackMenu" class="menu"></div>
<div id="passages">
<div id="passageStart" class="passage" style="visibility: visible;">
<div class="header"></div>
<div class="body content">
Your story will display this passage first. Edit it by double clicking it.</div>
<div class="footer"></div>
</div>
</div>
<div id="storeArea" hidden="">
...passage data is stored here...
</div>
</body>
Some notes: * The .header and .footer divs are unused by Twine's normal operations, but can be styled in any manner you like. * #snapback is not present when no passage in the story is tagged “bookmark”. * #storyMenu is the floating menu that appears when you use the Rewind button. * When a different passage is displayed, a .passage div and its contents (.header, .footer and .content) are recreated anew and inserted into the #passages div. * During transitions, the #passages div contains the old passage (which transitions toward the styles assigned to .transition-out) and the new passage (which transitions from of the styles assigned to .transition-in)
