User Tools

Site Tools


formatting_passages

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 Both sides next revision
formatting_passages [2013/12/14 01:12]
l [Lists]
formatting_passages [2013/12/14 02:36]
l
Line 1: Line 1:
-===== Formatting Passages ===== +#redirect ​[[syntax]]
- +
-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         ^ +
-| Italics   | %%//​text//​%%      | //​text// ​         | +
-| Boldface   | %%''​text''​%%      | **text** ​         | +
-| Underline   | %%__text__%% ​            | __text__ ​         | +
-| Strikethrough ​  | %%==text==%% ​            | <​del>​text</​del> ​         | +
-| Subscript   | %%H~~2~~O%%      | H<​sub>​2</​sub>​O ​              | +
-| Superscript   | %%meters/​second^^2^^%% ​  | meters/​second<​sup>​2</​sup> ​   | +
-| Monospace   | %%{{{text}}}%%      | ''​text'' ​             | +
-| Comment   | %%/​%comment%/​%%      ​| ​                  | +
-| Error   | %%@@error@@%%      | **error** ​                 | +
-| Inline styling ​ | %%@@font-weight:​bold;​text@@%% | **text** ​    | +
- +
-Some additional syntax: +
-^ Formatting ​   ^ Source Code ^ +
-| Bulleted list   | %%* one%% \\ %%* two%%   | +
-| Numbered list   | %%one%% \\ %%# two%%   | +
-| Horizontal line | %%----%% ​                |  +
-| Indented text | >​Text ​               | +
-| Doubly indented text | %%>>​Text%% ​               |  +
-| Indented block | %%<<<​%% \\ Text \\ %%<<<​%% ​               |  +
-| Heading <h1> | !Title | +
-| Heading <h2> | !!Title | +
-| Heading <h3> | !!!Title | +
-| Heading <h4> | !!!!Title | +
-| Heading <h5> | !!!!!Title | +
- +
-===== Comments ===== +
- +
-Comments are designed to let you 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. +
- +
- +
-===== 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@@''​ +
- +
-**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 like so: +
- +
-<​code>​ +
-.hotpink { +
-    color:​magenta;​ +
-    letter-spacing:​3px;​ +
-    font-size:​1.5em;​ +
-}</​code>​ +
- +
-Then, you can simply write this HTML every time you want to use this style: +
- +
-''<​span class="​hotpink">​Some text</​span>''​ +
- +
formatting_passages.txt · Last modified: 2017/10/09 20:39 (external edit)