formatting_passages
Differences
This shows you the differences between two versions of the page.
| 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)
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
