Jonah HTML structure

As a reference for those writing stylesheets, the HTML structure of the Jonah Story format is shown here.

When displaying three passages with this code:

:: Start
This is the first passage.

[[Next]]

:: Next [special]

This is the second passage, with a special tag.

[[End]]

:: End

This is the final passage.

Then, the resulting HTML DOM structure looks like this:

 <body data-tags="">
    <div id="floater">
      <div class="container">
        <div id="storyMenu" class="storyElement"></div>
        <p>
          <a id="restart" href="#">Restart Story</a>
        </p>
      </div>
    </div>
    <div id="content1">
      <div id="content2">
        <div id="header"></div>
        <div id="titleLine"></div>
        <h1>
          <span id="storyTitle" class="storyElement">Untitled Story</span>
        </h1>
        <h2>
          <span id="storySubtitle" class="storyElement"></span>
        </h2>
        <h3>
          <span id="storyAuthor" class="storyElement">Anonymous</span>
        </h3>
        <div id="passages">
          <div id="passageStart" class="passage" style="visibility: visible;">
            <div class="header"></div>
            <div class="title">
              Start
              <span class="toolbar">
                <a class="toolbar-bookmark" href="#.0" title="Bookmark this point in the story">bookmark</a>
                <a class="toolbar-rewind" title="Rewind the story to this point">rewind to here</a>
              </span>
            </div>
            <div class="body content">
              This is the first passage.
              <br>
              <br>
              <a class="internalLink">Next</a>
            </div>
            <div class="footer"></div>
          </div>
          <div id="passageNext" class="passage" style="visibility: visible;" data-tags="special">
            <div class="header"></div>
            <div class="title">
              Next
              <span class="toolbar">
                <a class="toolbar-bookmark" href="#.0.3" title="Bookmark this point in the story">bookmark</a>
                <a class="toolbar-rewind" title="Rewind the story to this point">rewind to here</a>
              </span>
            </div>
            <div class="body content">
              This is the second passage, with a special tag.
              <br>
              <br>
              <a class="internalLink">End</a>
            </div>
            <div class="footer"></div>
          </div>
          <div id="passageEnd" class="passage" style="visibility: visible;">
            <div class="header"></div>
            <div class="title">
              End
              <span class="toolbar">
                <a class="toolbar-bookmark" href="#.0.3.1" title="Bookmark this point in the story">bookmark</a>
                <a class="toolbar-rewind" title="Rewind the story to this point">rewind to here</a>
              </span>
            </div>
            <div class="body content">This is the final passage.</div>
            <div class="footer"></div>
          </div>
        </div>
        <p id="footer">
          This story was created with 
          <a class="externalLink" href="http://twinery.org/">Twine</a>
           and is powered by 
          <a class="externalLink" href="http://www.tiddlywiki.com/">TiddlyWiki</a>.
        </p>
      </div>
    </div>
    <div id="storeArea" hidden="">
       ...passage data is stored here...
    </div>
  </body>

Some notes:

Both the body element and the .passage element's data-tags attribute reflects the tags of the bottommost (i.e. the present) passage. This was originally used just as a CSS hook, before the advent of tagged stylesheets in version 1.4.0.
The #content1, #content2, #header, #titleLine, .header and .footer divs are unused by Twine's normal operations, but can be styled in any manner you like.
.floater is fixed to the upper-right corner of the screen. It is analogous to Sugarcane's #sidebar.

Twine Wiki

User Tools

Site Tools

Jonah HTML structure

Page Tools