<- [[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// |text|
| Boldface | %%''text''%% | **text** |text|
| Underline | %%__text__%% | __text__ |text|
| Strikethrough | %%==text==%% | text |text|
| Subscript | %%H~~2~~O%% | H2O |%%H2O %%|
| Superscript | %%meters/second^^2^^%% | meters/second2 |%%meters/second2%%|
| Monospace | %%{{{a //word//}}}%% | ''a %%//word//%%'' |%%a //word//%%|
| Comment | %%/%a comment%/%% | | |
| Error | %%@@error@@%% | **error** |error|
| Inline styling | %%@@font-weight:bold;text@@%% | **text** |text|
Some additional syntax:
^ Formatting ^ Source Code ^Resulting HTML^
| Bulleted list | %%* one%% \\ %%* two%% ||
| Numbered list | %%# one%% \\ %%# two%% |- one
\\ - two
|
| Horizontal line | %%----%% |
|
| Indented text | >Text |Text
|
| Doubly indented text | %%>>Text%% | Text
|
| Indented block | %%<<<%% \\ Text \\ %%<<<%% | Text
|
| Heading | !Title |Title
|
| Heading | !!Title |Title
|
| Heading | !!!Title |Title
|
| Heading | !!!!Title |Title
|
| Heading | !!!!!Title |Title
|
==== 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:
The sign reads:
TICKTOCKERSON INSTITUTE OF TEMPORAL FREEZING
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.
Here's some HTML that you may find helpful:
^ HTML ^ Produces ^
| Text | Horizontally centered text |
| Text | Right-aligned text |
| Text | Fully justified text |
| Text | "alt text" that is visible when you hover over the text |
| Text | Smaller text |
| Text | Bigger text |
|
| A line break (best used in a [[<>]] 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:
''Some text''
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:
.hotpink {
color:magenta;
letter-spacing:3px;
font-size:1.5em;
}
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]]->