summaryrefslogtreecommitdiff
path: root/TWiki/TextFormattingFAQ.mdwn
blob: 2c6e192695f986f20914e767cf58b851adc3ba78 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<font>**Text Formatting FAQ**</font>

The most frequently asked questions about text formatting are answered. Also, [[TextFormattingRules]] contains the complete TWiki shorthand system on one quick reference page.

%TOC%

> ----
>
> ### <a name="How_do_I_make_a_separator_"> How do I make a separator? </a>
>
> Create a separator - a horizontal rule - by entering three dashes at the beginning of a blank line: `---`. You can enter more than three if you like, for a more visible separator in edit mode: <br />`--------------`
>
> ----
>
> ### <a name="How_do_I_create_a_heading_"> How do I create a heading? </a>
>
> You can create six sizes of headings - &lt;h1&gt;...&lt;h6&gt; in HTML - by typing, from the beginning of a line, three dashes (-), from one to six plus signs (+), a space, and your heading text. The FAQ questions on this page are created with: `---+++ Have a question?`.
>
> * You can insert a nested table of contents, generated from headings, by placing <code>%TOC%</code> wherever you like on a page (see %TWIKIWEB%.TWikiVariables for more <code>%TOC%</code> options).
>
> ----
>
> <a name="TextEnclosed"></a>
>
> ### <a name="Text_enclosed_in_angle_brackets_"> Text enclosed in angle brackets like &lt;filename&gt; is not displayed. How can I show it as it is? </a>
>
> TWiki interprets text as HTML, and the '&lt;' and '&gt;' characters define where HTML commands start and end. Text _inside_ angle brackets is treated as HTML, and ignored if it doesn't actually do anything - either way, the brackets and its contents are not displayed.
>
> If you want to display angle brackets, enter them as HTML codes instead of typing them in directly:
>
> * `&lt;` = `<`<br />`&gt;` = `>`
>
> * **_You enter:_** `(a &gt; 0)`
>     **_Result:_** `(a > 0)`
>
> ----
>
> ### <a name="Some_words_appear_highlighted_wi"> Some words appear highlighted, with a "?" link at the end. How can I prevent that? </a>
>
> A question mark after a word is a link to a topic that doesn't yet exist - click it to create the new page. This is a TWiki feature - typing a [[MeaningfulTitle]] in a comment is an invitation for someone else to add a new branch to the topic.
>
> To prevent auto-linking - say you want to enter a word like JavaScript (the proper spelling!) - prefix the [[WikiStyleWord]] with the special TWiki HTML tag `<nop>`:
>
> * `<nop>WikiStyleWord` displays as WikiStyleWord
>
> ----
>
> ### <a name="How_can_I_write_fixed_font_text_"> How can I write fixed font text? </a>
>
> The quickest way is to enclose the text in equal signs:
>
> * **_You enter:_** <code>Proportional text, =fixed font=, proportional again.</code>
>     **_Result:_** Proportional text, `fixed font`, proportional again.
>
> ----
>
> ### <a name="Text_I_enter_gets_wrapped_around"> Text I enter gets wrapped around. How can I keep the formatting as it is? </a>
>
> TWiki interprets text as HTML, so you can use the `preformatted` HTML option to keep the new line of text as is. Enclose the text in &lt;pre&gt; &lt;/pre&gt;, or in TWiki's own &lt;verbatim&gt; &lt;/verbatim&gt; tag:
>
>     This text will keep its format as it is:
>     <verbatim>
>       Unit     Price   Qty  Cost
>       -------  ------  ---  ------
>       aaa       12.00    3   36.00
>     </verbatim>
>
> The `pre` tag is standard HTML; `verbatim` is a special TWiki tag that forces text to fixed font mode, and also prevents other tags and TWiki shortcuts from being expanded.
>
> ----
>
> ### <a name="How_do_I_create_tables_"> How do I create tables? </a>
>
> There are three possibilities:
>
> 1. Use Wiki rule with "|" vertical bars.
> 2. Use HTML tables with &lt;table&gt;, &lt;tr&gt;, &lt;td&gt; tags.
> 3. Use preformatted text with &lt;verbatim&gt; tags.
>
> **1\. Use Wiki rule with "|" vertical bars**
>
> * Example text: <br />`| cell A1 | cell B1 | cell C1 |`<br />`| cell A2 | cell B2 | cell C2 |`
> * Example output: <table border="1" cellpadding="1" cellspacing="0">
>   <tr>
>     <td> cell A1 </td>
>     <td> cell B1 </td>
>     <td> cell C1 </td>
>   </tr>
>   <tr>
>     <td> cell A2 </td>
>     <td> cell B2 </td>
>     <td> cell C2 </td>
>   </tr>
> </table>
>
> **2\. Use HTML tables with &lt;table&gt;, &lt;tr&gt;, &lt;td&gt; tags**
>
> This is a manual process using HTML commands.
>
> **_You enter:_**
>
>     <table border="1">
>       <tr>
>         <th> Head A  </th> <th> Head B  </th>
>       </tr><tr>
>         <td> Cell A2 </td> <td> Cell B2 </td>
>       </tr><tr>
>         <td> Cell A3 </td> <td> Cell B3 </td>
>       </tr>
>     </table>
>
> **_Result:_**
>
> <table border="1">
>   <tr>
>     <th> Head A </th>
>     <th> Head B </th>
>   </tr>
>   <tr>
>     <td> Cell A2 </td>
>     <td> Cell B2 </td>
>   </tr>
>   <tr>
>     <td> Cell A3 </td>
>     <td> Cell B3 </td>
>   </tr>
> </table>
>
> **3\. Use preformatted text with &lt;verbatim&gt; tags**
>
> See "Text enclosed..."
>
> ----
>
> ### <a name="Can_I_include_images_on_a_page_"> Can I include images on a page? </a>
>
> Yes. The easiest way is to [[FileAttachment]] a GIF, JPG or PNG file to a topic and then to place it with: <code>%ATTACHURL%/myImage.gif</code>. This works only for the page that the image is attached to.
>
> To place an image on any page, ther are two ways of including inline images.
>
> **1\. Using URL ending in .gif, .jpg, .jpeg, .png**
>
> This is a simple and automatic way of including inline images. Simply write the URL of the image file, this will create the inline image for you. **_NOTE:_** The images must be accessible as a URL.
>
> * **_You enter:_** <code> TWiki %PUBURL%/wikiHome.gif logo.</code><br />**_Result:_** TWiki %PUBURL%/wikiHome.gif logo.
>
> <a name="ImgUpload"></a> You can upload images directly to your server with FTP access. You can also [[FileAttachment]] image files to a topic - you could even create a dedicated image topic, like `ImageLibrary` - and then link to the images directly:
>
> * Attach `pic.gif` to `Someweb.SomeTopic`<br /> Display with <code>%PUBURL%/Someweb/SomeTopic/pic.gif</code>
>
> **2\. Using &lt;img&gt; tag**
>
> This is a manual process where you have more control over the rendering of the image. Use the &lt;img&gt; tag of HTML to include GIF, JPG and PNG files. **Note:** The display of the topic is faster if you include the `WIDTH` and `HEIGHT` parameters that have the actual image size. <http://www.htmlhelp.com/reference/wilbur/special/img.html> has more on inline images.
>
> * **_You enter:_** `TWiki <img src="%PUBURL%/wikiHome.gif" width="46" height="50" border="0" alt="logo" /> logo.`<br />**_Result:_**<br /> TWiki <img src="%PUBURL%/wikiHome.gif" width="46" height="50" alt="logo" /> logo.
>
> ----
>
> ### <a name="Can_I_write_colored_text_"> Can I write colored text? </a>
>
> Sure. The quickest way is to go &lt;font color="colorCode"&gt;colorize&lt;/font&gt; - `font` is an HTML tag that works in any browser, although it's been phased out in the latest HTML specs.
>
> You can also use the up-to-date `style` attribute - ex: `style="color:#ff0000"` - placed in most HTML tags. `span` is an all-purpose choice: "&lt;span style="color:#ff0000"&gt;CoLoR&lt;/span&gt;. Only old (like 3.x IE &amp; NS) browsers have a problem with `style`.
>
> "colorCode" is the _hexadecimal RGB color code_, which is simply Red, Green and Blue values in hex notation (base 16, 0-F). For pure red, the RGB components are 255-0-0 - full red (255), no green or blue. That's FF-0-0 in hex, or <code>"#ff000=" for Web page purposes. For a basic color selection (you can [[StandardColors]] names instead of hex code in the =font</code> tag only):
>
> <table>
>   <tr bgcolor="#e0e0e0">
>     <td><font color="#000000"> <strong>Black:</strong> </font></td>
>     <td><code>"#000000"</code></td>
>     <td><font color="#008000"> <strong>Green:</strong> </font></td>
>     <td><code>"#008000"</code></td>
>     <td><font color="#c0c0c0"> <strong>Silver:</strong> </font></td>
>     <td><code>"#c0c0c0"</code></td>
>     <td><font color="#00ff00"> <strong>Lime:</strong> </font></td>
>     <td><code>"#00ff00"</code></td>
>   </tr>
>   <tr bgcolor="#c0c0c0">
>     <td><font color="#808080"> <strong>Gray:</strong> </font></td>
>     <td><code>"#808080"</code></td>
>     <td><font color="#808000"> <strong>Olive:</strong> </font></td>
>     <td><code>"#808000"</code></td>
>     <td><font color="#ffffff"> <strong>White:</strong> </font></td>
>     <td><code>"#ffffff"</code></td>
>     <td><font color="#ffff00"> <strong>Yellow:</strong> </font></td>
>     <td><code>"#ffff00"</code></td>
>   </tr>
>   <tr bgcolor="#e0e0e0">
>     <td><font color="#800000"> <strong>Maroon:</strong> </font></td>
>     <td><code>"#800000"</code></td>
>     <td><font color="#000080"> <strong>Navy:</strong> </font></td>
>     <td><code>"#000080"</code></td>
>     <td><font color="#ff0000"> <strong>Red:</strong> </font></td>
>     <td><code>"#ff0000"</code></td>
>     <td><font color="#0000ff"> <strong>Blue:</strong> </font></td>
>     <td><code>"#0000ff"</code></td>
>   </tr>
>   <tr bgcolor="#c0c0c0">
>     <td><font color="#800080"> <strong>Purple:</strong> </font></td>
>     <td>="#800080"= </td>
>     <td><font color="#008080"> <strong>Teal:</strong> </font></td>
>     <td><code>"#008080"</code></td>
>     <td><font color="#ff00ff"> <strong>Fuchsia:</strong> </font></td>
>     <td><code>"#ff00ff"</code></td>
>     <td><font color="#00ffff"> <strong>Aqua:</strong> </font></td>
>     <td><code>"#00ffff"</code></td>
>   </tr>
> </table>
>
> * **_You enter:_** ` <font color="#ff0000"> Red color </font> draws attention. `
>     **_Result:_** <font> Red color </font> draws attention.
>
> ----

-- [[PeterThoeny]] - 13 Sep 2001 <br /> -- [[MikeMannix]] - 14 Sep 2001 <br />