1 <font>**Text Formatting FAQ**</font>
3 The most frequently asked questions about text formatting are answered. Also, [[TextFormattingRules]] contains the complete TWiki shorthand system on one quick reference page.
7 <li><a href="#How do I make a separator?"> How do I make a separator?</a></li>
8 <li><a href="#How do I create a heading?"> How do I create a heading?</a></li>
9 <li><a href="#Text enclosed in angle brackets"> Text enclosed in angle brackets like <filename> is not displayed. How can I show it as it is?</a></li>
10 <li><a href="#Some words appear highlighted, w"> Some words appear highlighted, with a "?" link at the end. How can I prevent that?</a></li>
11 <li><a href="#How can I write fixed font text?"> How can I write fixed font text?</a></li>
12 <li><a href="#Text I enter gets wrapped around"> Text I enter gets wrapped around. How can I keep the formatting as it is?</a></li>
13 <li><a href="#How do I create tables?"> How do I create tables?</a></li>
14 <li><a href="#Can I include images and picture"> Can I include images and pictures?</a></li>
15 <li><a href="#Can I write colored text?"> Can I write colored text?</a></li>
21 > ### <a name="How do I make a separator?"></a> How do I make a separator?
23 > You can make a horizontal separator by entering three dashes at the beginning of a line: `---`.
27 > ### <a name="How do I create a heading?"></a> How do I create a heading?
29 > You can create six sizes of headings - <h1>...<h6> 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?`.
31 > - You can insert a nested table of contents, generated from headings, by placing `%TOC%` wherever you like on a page (see [[TWikiVariables]] for more `%TOC%` options).
35 > <a name="TextEnclosed"></a>
37 > ### <a name="Text enclosed in angle brackets"></a><a name="Text enclosed in angle brackets "></a> Text enclosed in angle brackets like <filename> is not displayed. How can I show it as it is?
39 > TWiki interprets text as HTML. The '<' and '>' characters are used to define HTML commands. Text contained in angle brackets is interpreted by the browser if it's a valid HTML instruction, or ignored if it isn't - either way, the brackets and its contents are not displayed.
41 > If you want to display angle brackets, enter them as HTML codes instead of typing them in directly:
43 > - `<` = `<`<br />`>` = `>`
45 > - **_You enter:_** `(a > 0)`
46 > **_Result:_** `(a > 0)`
50 > ### <a name="Some words appear highlighted, w"></a> Some words appear highlighted, with a "?" link at the end. How can I prevent that?
52 > 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.
54 > 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>`:
56 > - `<nop>WikiStyleWord` displays as WikiStyleWord
60 > ### <a name="How can I write fixed font text?"></a> How can I write fixed font text?
62 > The quickest way is to enclose the text in equal signs:
64 > - **_You enter:_** `Proportional text, =fixed font=, proportional again.`
65 > **_Result:_** Proportional text, `fixed font`, proportional again.
69 > ### <a name="Text I enter gets wrapped around"></a> Text I enter gets wrapped around. How can I keep the formatting as it is?
71 > TWiki interprets text as HTML, so you can use the `preformatted` HTML text option to keep the new line of text as is. Enclose the text in <pre> </pre>, or in TWiki's own <verbatim> </verbatim> tags:
73 > This text will keep its format as it is:
76 > ------- ------ --- ------
80 > The `pre` tag is standard HTML; `verbatim` is a special TWiki tag that also forces text to fixed font mode, and also prevents other tags and TWiki shortcuts from being expanded.
84 > ### <a name="How do I create tables?"></a> How do I create tables?
86 > There are three possibilities:
88 > 1. Use Wiki rule with "|" vertical bars.
89 > 2. Use HTML tables with <table>, <tr>, <td> tags.
90 > 3. Use preformatted text with <verbatim> tags.
92 > **1\. Use Wiki rule with "|" vertical bars**
94 > - Example text: <br />`| cell A1 | cell B1 | cell C1 |`<br />`| cell A2 | cell B2 | cell C2 |`
95 > - Example output: <table border="1" cellpadding="0" cellspacing="0">
108 > **2\. Use HTML tables with <table>, <tr>, <td> tags**
110 > This is a manual process using HTML commands.
116 > <th> Head A </th> <th> Head B </th>
118 > <td> Cell A2 </td> <td> Cell B2 </td>
120 > <td> Cell A3 </td> <td> Cell B3 </td>
141 > **3\. Use preformatted text with <verbatim> tags**
143 > See [["Text enclosed..."|Main/WebHome#TextEnclosed]]
147 > ### <a name="Can I include images and picture"></a> Can I include images and pictures?
149 > Yes, this is possible. The easiest way of including images is to attach a GIF, JPG or PNG file to a topic and then to include it with text `%ATTACHURL%/myImage.gif` . [[FileAttachment]] has more.
151 > There are actually two ways of including inline images.
153 > **1\. Using URL ending in .gif, .jpg, .jpeg, .png**
155 > 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.
157 > - **_You enter:_** ` TWiki http://www.dementia.org/twiki//view/wikiHome.gif logo.`<br />**_Result:_** TWiki ![wikiHome.gif](http://www.dementia.org/twiki//view/wikiHome.gif) logo.
159 > **2\. Using <img> tag**
161 > This is a manual process where you have more control over the rendering of the image. Use the <img> 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.
163 > - **_You enter:_** `TWiki <img src="http://www.dementia.org/twiki//view/wikiHome.gif" width="46" height="50" /> logo.`<br />**_Result:_**<br /> TWiki <img src="http://www.dementia.org/twiki//view/wikiHome.gif" width="46" height="50" /> logo.
167 > ### <a name="Can I write colored text?"></a> Can I write colored text?
169 > Sure. The quickest way is to use the <font color="colorCode"> and </font> tags - they're HTML tags that work in any browser, (although they've been phased in the latest version).
171 > You can also use a `style` attribute: `style="color:#ff0000"`, placed in most HTML tags - `span` is an all-purpose choice: "<span style="color:#ff0000">.
173 > "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 [[StandardColor|Main/StandardColors]] names instead of hex code in the =font</code> tag only):
176 > <tr bgcolor="#e0e0e0">
177 > <td><font color="#000000"> <strong>Black:</strong> </font></td>
178 > <td><code>"#000000"</code></td>
179 > <td><font color="#008000"> <strong>Green:</strong> </font></td>
180 > <td><code>"#008000"</code></td>
181 > <td><font color="#c0c0c0"> <strong>Silver:</strong> </font></td>
182 > <td><code>"#c0c0c0"</code></td>
183 > <td><font color="#00ff00"> <strong>Lime:</strong> </font></td>
184 > <td><code>"#00ff00"</code></td>
186 > <tr bgcolor="#c0c0c0">
187 > <td><font color="#808080"> <strong>Gray:</strong> </font></td>
188 > <td><code>"#808080"</code></td>
189 > <td><font color="#808000"> <strong>Olive:</strong> </font></td>
190 > <td><code>"#808000"</code></td>
191 > <td><font color="#ffffff"> <strong>White:</strong> </font></td>
192 > <td><code>"#ffffff"</code></td>
193 > <td><font color="#ffff00"> <strong>Yellow:</strong> </font></td>
194 > <td><code>"#ffff00"</code></td>
196 > <tr bgcolor="#e0e0e0">
197 > <td><font color="#800000"> <strong>Maroon:</strong> </font></td>
198 > <td><code>"#800000"</code></td>
199 > <td><font color="#000080"> <strong>Navy:</strong> </font></td>
200 > <td><code>"#000080"</code></td>
201 > <td><font color="#ff0000"> <strong>Red:</strong> </font></td>
202 > <td><code>"#ff0000"</code></td>
203 > <td><font color="#0000ff"> <strong>Blue:</strong> </font></td>
204 > <td><code>"#0000ff"</code></td>
206 > <tr bgcolor="#c0c0c0">
207 > <td><font color="#800080"> <strong>Purple:</strong> </font></td>
208 > <td>="#800080"= </td>
209 > <td><font color="#008080"> <strong>Teal:</strong> </font></td>
210 > <td><code>"#008080"</code></td>
211 > <td><font color="#ff00ff"> <strong>Fuchsia:</strong> </font></td>
212 > <td><code>"#ff00ff"</code></td>
213 > <td><font color="#00ffff"> <strong>Aqua:</strong> </font></td>
214 > <td><code>"#00ffff"</code></td>
218 > - **_You enter:_** ` <font color="#ff0000"> Red color </font> draws attention. `
219 > **_Result:_** <font> Red color </font> draws attention.
223 -- [[PeterThoeny]] - 13 Sep 2001 <br /> -- [[MikeMannix]] - 14 Sep 2001 <br />