User Tools

Site Tools


formatting_passages

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

formatting_passages [2013/12/14 00:36]
l
formatting_passages [2017/10/09 20:39]
Line 1: Line 1:
-===== 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         ^ 
-| 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)