b9f3bf8d71372ebe15ab3802d44335140405702d
[openafs-wiki.git] / TWiki / TextFormattingFAQ.mdwn
1 ## <a name="Text Formatting FAQ"></a><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="#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 &lt;filename&gt; 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 on a page?"> Can I include images on a page?</a></li>
15     <li><a href="#Can I write colored text?"> Can I write colored text?</a></li>
16   </ul>
17 </div>
18
19 > ----
20 >
21 > ### <a name="How do I make a separator?"></a> How do I make a separator?
22 >
23 > 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 />`--------------`
24 >
25 > ----
26 >
27 > ### <a name="How do I create a heading?"></a> How do I create a heading?
28 >
29 > 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?`.
30 >
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).
32 >
33 > ----
34 >
35 > <a name="TextEnclosed"></a>
36 >
37 > ### <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?
38 >
39 > 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.
40 >
41 > If you want to display angle brackets, enter them as HTML codes instead of typing them in directly:
42 >
43 > - `&lt;` = `<`<br />`&gt;` = `>`
44 >
45 > - **_You enter:_** `(a &gt; 0)`
46 >     **_Result:_** `(a > 0)`
47 >
48 > ----
49 >
50 > ### <a name="Some words appear highlighted, w"></a> Some words appear highlighted, with a "?" link at the end. How can I prevent that?
51 >
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.
53 >
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>`:
55 >
56 > - `<nop>WikiStyleWord` displays as WikiStyleWord
57 >
58 > ----
59 >
60 > ### <a name="How can I write fixed font text?"></a> How can I write fixed font text?
61 >
62 > The quickest way is to enclose the text in equal signs:
63 >
64 > - **_You enter:_** `Proportional text, =fixed font=, proportional again.`
65 >     **_Result:_** Proportional text, `fixed font`, proportional again.
66 >
67 > ----
68 >
69 > <a name="VerbatimText"></a>
70 >
71 > ### <a name="Text I enter gets wrapped around"></a> Text I enter gets wrapped around. How can I keep the formatting as it is?
72 >
73 > 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:
74 >
75 >     This text will keep its format as it is:
76 >     <verbatim>
77 >       Unit      Price Qty  Cost
78 >       -------  ------  ---  ------
79 >       aaa              12.00   3      36.00
80 >     </verbatim>
81 >
82 > 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.
83 >
84 > ----
85 >
86 > ### <a name="How do I create tables?"></a> How do I create tables?
87 >
88 > There are three possibilities:
89 >
90 > 1. Use Wiki rule with "|" vertical bars.
91 > 2. Use HTML tables with &lt;table&gt;, &lt;tr&gt;, &lt;td&gt; tags.
92 > 3. Use preformatted text with &lt;verbatim&gt; tags.
93 >
94 > **1\. Use Wiki rule with "|" vertical bars**
95 >
96 > - Example text: <br />`| cell A1 | cell B1 | cell C1 |`<br />`| cell A2 | cell B2 | cell C2 |`
97 > - Example output: <table border="1" cellpadding="0" cellspacing="0">
98 >   <tr>
99 >     <td> cell A1 </td>
100 >     <td> cell B1 </td>
101 >     <td> cell C1 </td>
102 >   </tr>
103 >   <tr>
104 >     <td> cell A2 </td>
105 >     <td> cell B2 </td>
106 >     <td> cell C2 </td>
107 >   </tr>
108 > </table>
109 >
110 > **2\. Use HTML tables with &lt;table&gt;, &lt;tr&gt;, &lt;td&gt; tags**
111 >
112 > This is a manual process using HTML commands.
113 >
114 > **_You enter:_**
115 >
116 >     <table border="1">
117 >       <tr>
118 >        <th> Head A  </th> <th> Head B  </th>
119 >       </tr><tr>
120 >        <td> Cell A2 </td> <td> Cell B2 </td>
121 >       </tr><tr>
122 >        <td> Cell A3 </td> <td> Cell B3 </td>
123 >       </tr>
124 >     </table>
125 >
126 > **_Result:_**
127 >
128 > <table border="1">
129 >   <tr>
130 >     <th> Head A </th>
131 >     <th> Head B </th>
132 >   </tr>
133 >   <tr>
134 >     <td> Cell A2 </td>
135 >     <td> Cell B2 </td>
136 >   </tr>
137 >   <tr>
138 >     <td> Cell A3 </td>
139 >     <td> Cell B3 </td>
140 >   </tr>
141 > </table>
142 >
143 > **3\. Use preformatted text with &lt;verbatim&gt; tags**
144 >
145 > See [["Text I enter gets wrapped around..."|Main/WebHome#VerbatimText]]
146 >
147 > ----
148 >
149 > ### <a name="Can I include images on a page?"></a> Can I include images on a page?
150 >
151 > 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 page that the image is attached to.
152 >
153 > To place an image on any page, ther are two ways of including inline images.
154 >
155 > **1\. Using URL ending in .gif, .jpg, .jpeg, .png**
156 >
157 > 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.
158 >
159 > - **_You enter:_** ` TWiki http://www.dementia.org/twiki//view/TWiki/TWikiLogos/twikilogo88x31.gif logo.`<br />**_Result:_** TWiki ![twikilogo88x31.gif](http://www.dementia.org/twiki//view/TWiki/TWikiLogos/twikilogo88x31.gif) logo.
160 >
161 > <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:
162 >
163 > - Attach `pic.gif` to `Someweb.SomeTopic`<br /> Display with <code>http://www.dementia.org/twiki//view/Someweb/SomeTopic/pic.gif</code>
164 >
165 > **2\. Using &lt;img&gt; tag**
166 >
167 > 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.
168 >
169 > - **_You enter:_** `TWiki <img src="http://www.dementia.org/twiki//view/TWiki/TWikiLogos/twikilogo88x31.gif" width="88" height="31" border="0" alt="logo" /> logo.`<br />**_Result:_**<br /> TWiki <img src="http://www.dementia.org/twiki//view/TWiki/TWikiLogos/twikilogo88x31.gif" width="88" height="31" alt="logo" /> logo.
170 >
171 > ----
172 >
173 > ### <a name="Can I write colored text?"></a> Can I write colored text?
174 >
175 > [[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%**.
176 >
177 > - **_You enter:_** `%RED% red text %ENDCOLOR% and %GREEN% green text %ENDCOLOR%`
178 >     **_Result:_** %RED% red text %ENDCOLOR% and %GREEN% green text %ENDCOLOR%
179 >
180 > **_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%`.
181 >
182 > 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`.
183 >
184 > 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 `"#ff000"` for Web page purposes. [[StandardColors]] lists basic colors.
185 >
186 > ----
187
188 -- [[PeterThoeny]] - 21 Feb 2002 <br /> -- [[MikeMannix]] - 14 Sep 2001 <br />