Twine Wiki

User Tools

Site Tools

Trace:
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 00:36]
l 		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'' ​             | +
-| Monospace block   | %%{{{%% \\ 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 "TO DO" messages to yourself, explanations about what a particularly complex macro structure is doing, or advisories to a collaborator working on this game with you. +
- +
-===== Lists ===== +
-Lists in particular are useful for setting off choices at the end of a passage. Although it feels natural to leave an empty line between a paragraph and a list, this creates extra whitespace that looks a little strange. Here's what it should look like: +
- +
-<​code>​ +
-It's a dark and stormy night aboard the Orient Express. You can't sleep; +
-something about the motion of the train disturbed you subtly. So instead you +
-have elected to spend the night in the dining car, sipping coffee and perusing +
-[[the newspaper|The London Times]]. +
- +
-You hear the door to the car open behind you. +
-* [[Look up]] +
-* [[Continue reading]] +
-</​code>​ +
- +
-===== HTML ===== +
- +
-If there'​s a particular kind of formatting that you'd like to use that isn't supported natively by Twee, you can put HTML source code directly into your story'​s text. You can, for instance, produce centered text with 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>​ +
- +
-===== 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
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki