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
Previous revision
formatting_passages [2013/12/14 01:12]
l [Lists]
formatting_passages [2013/12/14 19:00]
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)