User Tools

Site Tools


twine1:syntax

Differences

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

Link to this comparison view

twine1:syntax [2017/10/09 20:39]
twine1:syntax [2017/10/09 20:39] (current)
Line 1: Line 1:
 +<- [[link|About Links]] --------- [[tag|About Tags]]->
  
 +===== Formatting Passages =====
 +
 +Sometimes you'd like to apply styles to your text -- to italicize a book title, for example. You can do this with simple formatting codes that are similar to the double brackets of a link. Here is what's available to you:
 +
 +^ Formatting ​   ^ Source Code                ^Appears As         ​^Resulting HTML^
 +| Italics   | %%//​text//​%%      | //​text// ​         |<​em>​text</​em>​|
 +| Boldface   | %%''​text''​%%      | **text** ​         |<​strong>​text</​strong>​|
 +| Underline   | %%__text__%% ​            | __text__ ​         |<​u>​text</​u>​|
 +| Strikethrough ​  | %%==text==%% ​            | <​del>​text</​del> ​         |<​strike>​text</​strike>​|
 +| Subscript   | %%H~~2~~O%%      | H<​sub>​2</​sub>​O ​              ​|%%H<​sub>​2</​sub>​O %%|
 +| Superscript   | %%meters/​second^^2^^%% ​  | meters/​second<​sup>​2</​sup> ​   |%%meters/​second<​sup>​2</​sup>​%%|
 +| Monospace   | %%{{{a //​word//​}}}%%      | ''​a %%//​word//​%%'' ​             |%%<​code>​a //​word//</​code>​%%|
 +| Comment   | %%/%a comment%/%%      ​| ​                  | |
 +| Error   | %%@@error@@%%      | **error** ​                 |<span class=marked>​error</​span>​|
 +| Inline styling ​ | %%@@font-weight:​bold;​text@@%% | **text** ​    ​|<​span style="​font-weight:​bold">​text</​span>​|
 +
 +Some additional syntax:
 +^ Formatting ​   ^ Source Code ^Resulting HTML^
 +| Bulleted list   | %%* one%% \\ %%* two%%   ​|<​ul><​li>​one</​li>​\\ <​li>​two</​li></​ul>​|
 +| Numbered list   | %%# one%% \\ %%# two%%   ​|<​ol><​li>​one</​li>​\\ <​li>​two</​li></​ol>​|
 +| Horizontal line | %%----%% ​                ​|<​hr>​|
 +| Indented text | >​Text ​               |<​blockquote>​Text</​blockquote>​|
 +| Doubly indented text | %%>>​Text%% ​               | <​blockquote><​blockquote>​Text</​blockquote></​blockquote>​|
 +| Indented block | %%<<<​%% \\ Text \\ %%<<<​%% ​               | <​blockquote>​Text</​blockquote>​|
 +| Heading <h1> | !Title |<​h1>​Title</​h1>​|
 +| Heading <h2> | !!Title |<​h2>​Title</​h2>​|
 +| Heading <h3> | !!!Title |<​h3>​Title</​h3>​|
 +| Heading <h4> | !!!!Title |<​h4>​Title</​h4>​|
 +| Heading <h5> | !!!!!Title |<​h5>​Title</​h5>​|
 +
 +==== A note about monospace ====
 +
 +When you use the monospace ''​%%{{{%%''​ and ''​%%}}}%%''​ syntax, all other syntax inside the triple curly braces will be disabled. This allows you to, for instance, include ASCII art in your stories, or write documentation about a particular macro or HTML tag without that being interpreted by Twine.
 +
 +==== Escaped line breaks ====
 +
 +One extra piece of syntax, separate from the above tables, is available: ending a line with a backslash ''​\''​ will cause both the backslash and the line break to be removed from the passage, thus "​joining together"​ both lines. The main purpose of this will become apparent when you use [[macro]]s.
 +
 +==== Table syntax ====
 +
 +Some shorthand syntax for creating HTML tables exists, and is used like so:
 +
 +>​|!//​table header //|!//table header //|!//table header //|
 +>|//row 1//|//row 1//|//row 1//|
 +>|//row 2//|//row 2//|//row 2//|
 +>​|>​|//​row 3//|//row 3//|
 +>​|>​|>​|//​row 4//|
 +>|//rows 5 and 6//|//row 5//|//row 5//|
 +>​|~|//​row 6//|//row 6//|
 +>|//rows 7, 8 and 9//​|>​|//​row 7//|
 +>​|~|>​|//​row 8//|
 +>​|~|//​row 9//|//row 9//|
 +>​|//​table caption//|c
 +
 +
 +The text content of the table is italicised in the above sample.
 +
 +**Note**: make sure the first | character in each line doesn'​t have any whitespace before it.
 +
 +==== Comments ====
 +
 +Comments are used to leave remarks about particular parts of a passage. They are not displayed when the player views the passage. You could leave reminder messages to yourself, explanations about what a particularly complex macro structure is doing, or advice to a collaborator working on this game with you.
 +
 +For larger comments about the general story, consider [[annotation]]s.
 +==== HTML ====
 +
 +If there'​s a particular kind of formatting that you'd like to use that isn't supported natively by Twine, you can put HTML tags directly into your story'​s text. You can, for instance, produce a block of centered text with a white border using custom CSS like so:
 +
 +<​code>​
 +The sign reads:
 +<center style="​padding:​1em;​ border: 1px solid white;">​TICKTOCKERSON INSTITUTE OF TEMPORAL FREEZING</​center>​
 +It hangs in midair, detached from the wall and tilted askew, as if some cosmic video watcher clicked
 +the Pause button as it began to fall.
 +</​code>​
 +
 +Here's some HTML that you may find helpful:
 +^ HTML    ^ Produces ^
 +| <​center>​Text</​center> ​  | Horizontally centered text   |
 +| <span style="​text-align:​right">​Text</​span> ​  | Right-aligned text   |
 +| <span style="​text-align:​justify">​Text</​span> ​  | Fully justified text   |
 +| <abbr title="​Alt text">​Text</​abbr> ​  | "alt text" that is visible when you hover over the text   |
 +| <​small>​Text</​small> ​  | Smaller text  |
 +| <​big>​Text</​big> ​  | Bigger text  |
 +| <​br> ​  | A line break (best used in a [[<<​nobr>>​]] block) ​ |
 +
 +Also, don't forget that HTML tags have a "​style"​ attribute which can be used to apply CSS styles to the element.
 +
 +==== Inline styling ====
 +
 +Inline styling is a shorthand way to apply one-off CSS styles to a span of text. Where normally you would have to write:
 +
 +''<​span style="​color:​magenta;​letter-spacing:​3px;​font-size:​1.5em;">​Some text</​span>''​
 +
 +You can instead write:
 +
 +''​@@color:​magenta;​letter-spacing:​3px;​font-size:​1.5em;​Some text@@''​
 +
 +Any text between the first ''​@@''​ and the final '';''​ is usually interpreted as CSS style properties to apply to the span.
 +
 +**Note** that if you intend to re-use a particular set of CSS styles throughout the story, there is an easier way than copying and pasting the same inline style syntax over and over! You should create a [[stylesheet]] and define a CSS class (say, that you named "​hotpink"​) like so:
 +
 +<​code>​
 +.hotpink {
 +    color:​magenta;​
 +    letter-spacing:​3px;​
 +    font-size:​1.5em;​
 +}</​code>​
 +
 +This class collects several CSS properties into a set that you wish to re-use many times throughout your story. You can simply write this syntax every time you want to use this class:
 +
 +''​@@.hotpink;​Some text@@''​
 +
 +Any properties which begin with ''​.''​ are interpreted as CSS class names to apply to the style, instead of individual style properties.
 +
 +<- [[link|About Links]] --------- [[tag|About Tags]]->
twine1/syntax.txt ยท Last modified: 2017/10/09 20:39 (external edit)