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/24 21:36]
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]] is shown here. 
- 
-When displaying three passages with this code: 
-[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. 
-[/code] 
-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 html|Sugarcane]]'​s #sidebar. 
jonah_html.txt ยท Last modified: 2017/10/09 20:39 (external edit)