TWiki/TextFormattingFAQ.mdwn

   1 ## <a name="Text Formatting FAQ"></a> Text Formatting FAQ
   2
   3 The most frequently asked questions about text formatting are answered. Also, [[TextFormattingRules]] contains the complete TWiki shorthand system on one quick reference page.
   4
   5 <div>
   6   <ul>
   7     <li><a href="#Text Formatting FAQ"> Text Formatting FAQ</a><ul>
   8         <li><a href="#How do I make a separator?"> How do I make a separator?</a></li>
   9         <li><a href="#How do I create a heading?"> How do I create a heading?</a></li>
  10         <li><a href="#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></li>
  11         <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>
  12         <li><a href="#How do I start a word with an ex"> How do I start a word with an exclamation mark?</a></li>
  13         <li><a href="#How can I write fixed font text?"> How can I write fixed font text?</a></li>
  14         <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>
  15         <li><a href="#How do I create tables?"> How do I create tables?</a></li>
  16         <li><a href="#Can I include images on a page?"> Can I include images on a page?</a></li>
  17         <li><a href="#Can I write colored text?"> Can I write colored text?</a></li>
  18       </ul>
  19     </li>
  20   </ul>
  21 </div>
  22
  23 ----
  24
  25 ### <a name="How do I make a separator?"></a> How do I make a separator?
  26
  27 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 />`--------------`
  28
  29 ----
  30
  31 ### <a name="How do I create a heading?"></a> How do I create a heading?
  32
  33 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?`.
  34
  35 - You can insert a nested table of contents, generated from headings, by placing `%TOC%` wherever you like on a page (see %SYSTEMWEB%.TWikiVariables for more `%TOC%` options).
  36
  37 ----
  38
  39 <a name="TextEnclosed"></a>
  40
  41 ### <a name="Text enclosed in angle brackets"></a><a name="Text enclosed in angle brackets "></a> Text enclosed in angle brackets like &lt;filename&gt; is not displayed. How can I show it as it is?
  42
  43 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.
  44
  45 If you want to display angle brackets, enter them as HTML codes instead of typing them in directly:
  46
  47 - `&lt;` = `<`<br />`&gt;` = `>`
  48
  49 - **_You enter:_** `(a &gt; 0)`
  50     **_Result:_** `(a > 0)`
  51
  52 ----
  53
  54 ### <a name="Some words appear highlighted, w"></a> Some words appear highlighted, with a "?" link at the end. How can I prevent that?
  55
  56 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.
  57
  58 To prevent auto-linking - say you want to enter a word like JavaScript - prefix the [[WikiStyleWord]] with an exclamation point:
  59
  60 - `!WikiStyleWord` displays as WikiStyleWord
  61
  62 ----
  63
  64 ### <a name="How do I start a word with an ex"></a> How do I start a word with an exclamation mark?
  65
  66 A leading exclamation point is used to escape wiki formatting, as we have learned in the previous question. Sometimes it has an unwanted effect, such as when you want to write "!=" (e.g. "not equal"), you will not see the exclamation mark.
  67
  68 To escape the exclamation mark escape, try prefixing a `<nop>`, e.g. write `A <nop>!= B` to get "A != B". Alternatively, use the HTML entity `&#33;`, which renders as an exclamation mark, e.g. write `A &#33;= B` to get "A != B".
  69
  70 ----
  71
  72 ### <a name="How can I write fixed font text?"></a> How can I write fixed font text?
  73
  74 The quickest way is to enclose the text in equal signs:
  75
  76 - **_You enter:_** `Proportional text, =fixed font=, proportional again.`
  77     **_Result:_** Proportional text, `fixed font`, proportional again.
  78
  79 ----
  80
  81 <a name="VerbatimText"></a>
  82
  83 ### <a name="Text I enter gets wrapped around"></a> Text I enter gets wrapped around. How can I keep the formatting as it is?
  84
  85 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:
  86
  87     This text will keep its format as it is:
  88     <verbatim>
  89       Unit     Price   Qty  Cost
  90       -------  ------  ---  ------
  91       aaa       12.00    3   36.00
  92     </verbatim>
  93
  94 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.
  95
  96 **_NOTE:_** VARIABLES are still Set within verbatim tags (this is a historical peculiarity)
  97
  98 **_NOTE:_** The `verbatim` opening and closing tags are converted into `pre` tags; any HTML attributes (e.g., `class`, `id`) in the opening `verbatim` tag are included in the corresponding `pre` tag.
  99
 100 ----
 101
 102 ### <a name="How do I create tables?"></a> How do I create tables?
 103
 104 There are three possibilities:
 105
 106 1. Use Wiki rule with "|" vertical bars.
 107 2. Use HTML tables with &lt;table&gt;, &lt;tr&gt;, &lt;td&gt; tags.
 108 3. Use preformatted text with &lt;verbatim&gt; tags.
 109
 110 **1\. Use Wiki rule with "|" vertical bars**
 111
 112 - Example text: %BR% `| cell A1 | cell B1 | cell C1 |` %BR% `| cell A2 | cell B2 | cell C2 |`
 113 - Example output: <table border="1" cellpadding="0" cellspacing="0">
 114   <tr>
 115     <td> cell A1 </td>
 116     <td> cell B1 </td>
 117     <td> cell C1 </td>
 118   </tr>
 119   <tr>
 120     <td> cell A2 </td>
 121     <td> cell B2 </td>
 122     <td> cell C2 </td>
 123   </tr>
 124 </table>
 125
 126 **2\. Use HTML tables with &lt;table&gt;, &lt;tr&gt;, &lt;td&gt; tags**
 127
 128 This is a manual process using HTML commands.
 129
 130 **_You enter:_**
 131
 132     <table border="1">
 133       <tr>
 134         <th> Head A  </th> <th> Head B  </th>
 135       </tr><tr>
 136         <td> Cell A2 </td> <td> Cell B2 </td>
 137       </tr><tr>
 138         <td> Cell A3 </td> <td> Cell B3 </td>
 139       </tr>
 140     </table>
 141
 142 **_Result:_**
 143
 144 <table border="1">
 145   <tr>
 146     <th> Head A </th>
 147     <th> Head B </th>
 148   </tr>
 149   <tr>
 150     <td> Cell A2 </td>
 151     <td> Cell B2 </td>
 152   </tr>
 153   <tr>
 154     <td> Cell A3 </td>
 155     <td> Cell B3 </td>
 156   </tr>
 157 </table>
 158
 159 **3\. Use preformatted text with &lt;verbatim&gt; tags**
 160
 161 See [["Text I enter gets wrapped around..."|Main/WebHome#VerbatimText]]
 162
 163 ----
 164
 165 ### <a name="Can I include images on a page?"></a> Can I include images on a page?
 166
 167 Yes. The easiest way is to [[attach|Main/FileAttachment]] a GIF, JPG or PNG file to a topic and then to place it with: `%ATTACHURL%/myImage.gif`. This works only for the topic where the image is attached to.
 168
 169 To place an image on any topic, there are two ways of including inline images.
 170
 171 **1\. Using URL ending in .gif, .jpg, .jpeg, .png**
 172
 173 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|Main/WebHome#ImgUpload]] as a URL.
 174
 175 - **_You enter:_** ` %PUBURL%/%SYSTEMWEB%/TWikiLogos/T-logo-80x15.gif logo.`<br />**_Result:_** ![T-logo-80x15.gif](http://www.dementia.org/twiki//view/%SYSTEMWEB%/TWikiLogos/T-logo-80x15.gif) logo.
 176
 177 <a name="ImgUpload"></a> You can upload images directly to your server with FTP access. You can also [[attach|Main/FileAttachment]] image files to a topic - you could even create a dedicated image topic, like `ImageLibrary` - and then link to the images directly:
 178
 179 - Attach `pic.gif` to `Someweb.SomeTopic`<br /> Display with `%PUBURL%/Someweb/SomeTopic/pic.gif`
 180
 181 **2\. Using &lt;img&gt; tag**
 182
 183 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 rendering 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.
 184
 185 - **_You enter:_** ` <img src="%PUBURLPATH%/%SYSTEMWEB%/TWikiLogos/T-logo-80x15.gif" width="80" height="15" border="0" alt="logo" /> logo.`<br />**_Result:_**<br /><img src="http://www.dementia.org/twiki//view/%SYSTEMWEB%/TWikiLogos/T-logo-80x15.gif" width="80" height="15" alt="logo" /> logo.
 186
 187 ----
 188
 189 ### <a name="Can I write colored text?"></a> Can I write colored text?
 190
 191 [[TWikiPreferences]] defines some commonly used colors: **%YELLOW% %YELLOW%%ENDCOLOR%, %RED% %RED%%ENDCOLOR%, %PINK% %PINK%%ENDCOLOR%, %PURPLE% %PURPLE%%ENDCOLOR%, %TEAL% %TEAL%%ENDCOLOR%, %NAVY% %NAVY%%ENDCOLOR%, %BLUE% %BLUE%%ENDCOLOR%, %AQUA% %AQUA%%ENDCOLOR%, %LIME% %LIME%%ENDCOLOR%, %GREEN% %GREEN%%ENDCOLOR%, %OLIVE% %OLIVE%%ENDCOLOR%, %MAROON% %MAROON%%ENDCOLOR%, %BLACK% %BLACK%%ENDCOLOR%, %GRAY% %GRAY%%ENDCOLOR%, %SILVER% %SILVER%%ENDCOLOR%** and **%ENDCOLOR%**.
 192
 193 - **_You enter:_** `%RED% red text %ENDCOLOR% and %GREEN% green text %ENDCOLOR%`
 194     **_Result:_** %RED% red text %ENDCOLOR% and %GREEN% green text %ENDCOLOR%
 195
 196 **_Note:_** `%<color>%` text must end with `%ENDCOLOR%` . If you want to switch from one color to another one you first need to end the active color with `%ENDCOLOR%`, e.g. write `%RED% some text %ENDCOLOR% %GREEN% more text %ENDCOLOR%`.
 197
 198 If you need more colors you can use HTML, like `<font color="#ff0000"> red text </font>`. 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: `<span style="color:#ff0000">CoLoR</span>`. Only old (like 3.x IE &amp; NS) browsers have a problem with `style`.
 199
 200 The code 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 `"#ff0000"` for Web page purposes. [[StandardColors]] lists basic colors.
 201
 202 ----
 203
 204 -- **_Contributors:_** TWiki:Main.PeterThoeny, TWiki:Main.MikeMannix