User Tools

Site Tools


jonah_html

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

jonah_html [2014/03/19 07:56]
l
jonah_html [2017/10/09 20:39]
Line 1: Line 1:
- ​======Jonah HTML structure====== 
  
-As a reference for those writing [[stylesheet]]s,​ the HTML structure of the **Jonah** [[Story format]] tends to look 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="">​ 
-        <div tiddler="​Start"​ tags=""​ created="​201403192130"​ modifier="​twee"​ twine-position="​10,​10">​This is the first passage.\n\n[[Next]]</​div>​ 
-        <div tiddler="​End"​ tags=""​ created="​201403192146"​ modifier="​twee"​ twine-position="​290,​10">​This is the final passage.</​div>​ 
-        <div tiddler="​StoryAuthor"​ tags=""​ created="​201403192130"​ modifier="​twee"​ twine-position="​10,​290">​Anonymous</​div>​ 
-        <div tiddler="​Next"​ tags="​special"​ created="​201403192146"​ modifier="​twee"​ twine-position="​150,​10">​This is the second passage, with a special tag.\n\n[[End]]</​div>​ 
-        <div tiddler="​StoryTitle"​ tags=""​ created="​201403192130"​ modifier="​twee"​ twine-position="​10,​150">​Untitled Story</​div>​ 
-      </​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. 
jonah_html.txt ยท Last modified: 2017/10/09 20:39 (external edit)