User Tools

Site Tools


jonah_html

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
Next revision Both sides next revision
jonah_html [2014/03/19 07:56]
l
jonah_html [2014/03/24 21:36]
l
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: 
 +[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="">​    <​body data-tags="">​
Line 82: Line 101:
       </​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 93: 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.txt · Last modified: 2017/10/09 20:39 (external edit)