User Tools

Site Tools


jonah_html

Differences

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

Link to this comparison view

Next revision
Previous revision
jonah_html [2014/03/19 07:55]
l created
jonah_html [2017/10/09 20:39] (current)
Line 1: Line 1:
  ​======Jonah HTML structure======  ​======Jonah HTML structure======
  
-As a reference for those writing [[stylesheet]]s,​ the HTML structure of the **Jonah** [[Story format]] ​tends to look like this:+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: 
 + 
 +  :: 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="">​    <​body data-tags="">​
Line 74: Line 93:
           </​div>​           </​div>​
           <p id="​footer">​           <p id="​footer">​
-            ​ +            This story was created with 
-This story was created with +
             <a class="​externalLink"​ href="​http://​twinery.org/">​Twine</​a>​             <a class="​externalLink"​ href="​http://​twinery.org/">​Twine</​a>​
              and is powered by               and is powered by 
-            <a class="​externalLink"​ href="​http://​www.tiddlywiki.com/">​TiddlyWiki</​a>​ +            <a class="​externalLink"​ href="​http://​www.tiddlywiki.com/">​TiddlyWiki</​a>​.
-            ​. +
           </p>           </p>
         </​div>​         </​div>​
       </​div>​       </​div>​
       <div id="​storeArea"​ hidden="">​       <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>​ +         ...passage ​data is stored here...
-        <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>​       </​div>​
     </​body>​     </​body>​
Line 96: Line 108:
   * 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.   * 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.   * 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.1395230147.txt.gz · Last modified: 2017/10/09 20:37 (external edit)