TextFormattingFAQ < TWiki

<font size="+3"><b>Text Formatting FAQ</b></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%

<blockquote>
---
---+++ How do I make a separator?

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 />
=--------------=

--------------
---+++ How do I create a heading?

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 =%<nop>TOC%= wherever you like on a page (see %TWIKIWEB%.TWikiVariables for more =%<nop>TOC%= options).

-----
#TextEnclosed
---+++ Text enclosed in angle brackets like &lt;filename&gt; is not displayed. How can I show it as it is?

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:
   * =&amp;lt;= = =&lt;= <br />
     =&amp;gt;= = =&gt;=

   * __You enter:__ =(a &amp;gt; 0)= <p /> 
     __Result:__ =(a &gt; 0)=

---
---+++ Some words appear highlighted, with a "?" link at the end. How can I prevent that?

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 <nop>JavaScript (the proper spelling!) - prefix the WikiStyleWord with the special TWiki HTML tag =&lt;nop&gt;=: 

   * =&lt;nop&gt;WikiStyleWord= displays as <nop>WikiStyleWord

---
---+++ How can I write fixed font text?

The quickest way is to enclose the text in equal signs:

   * __You enter:__ =Proportional text, <nop>=fixed font=<nop>, proportional again.= <p />
     __Result:__ Proportional text, =fixed font=, proportional again.

---
---+++ Text I enter gets wrapped around. How can I keep the formatting as it is?

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:
<pre>
This text will keep its format as it is:
&lt;verbatim&gt;
  Unit     Price   Qty  Cost
  -------  ------  ---  ------
  aaa       12.00    3   36.00
&lt;/verbatim&gt;
</pre>

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.

---
---+++ How do I create tables?

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: 
     | cell A1 | cell B1 | cell C1 |
     | cell A2 | cell B2 | cell C2 |

*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:__

<pre>
&lt;table border="1"&gt;
  &lt;tr&gt;
    &lt;th&gt; Head A  &lt;/th&gt; &lt;th&gt; Head B  &lt;/th&gt;
  &lt;/tr&gt;&lt;tr&gt;
    &lt;td&gt; Cell A2 &lt;/td&gt; &lt;td&gt; Cell B2 &lt;/td&gt;
  &lt;/tr&gt;&lt;tr&gt;
    &lt;td&gt; Cell A3 &lt;/td&gt; &lt;td&gt; Cell B3 &lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</pre>

__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 [[#TextEnclosed]["Text enclosed..."]] 

---
---+++ Can I include images on a page?

Yes. The easiest way is to [[FileAttachment][attach]] a GIF, JPG or PNG file to a topic and then to place it with: =%<nop>ATTACHURL%/myImage.gif=. 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 [[#ImgUpload][accessible]] as a URL.

   * __You enter:__ <code> TWiki <nop>%PUBURL%/wikiHome.gif logo.</code> <br />
     __Result:__ TWiki %PUBURL%/wikiHome.gif logo.

#ImgUpload
You can upload images directly to your server with FTP access. You can also [[FileAttachment][attach]] 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 =<no>%PUBURL%/Someweb/<nop>SomeTopic/pic.gif=

*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:__ <code>TWiki &lt;img src="%PUBURL%/wikiHome.gif" width="46" height="50" border="0" alt="logo" /&gt; logo.</code><br />
     __Result:__ <br /> TWiki <img src="%PUBURL%/wikiHome.gif" width="46" height="50" border="0" alt="logo" /> logo.

-----
---+++ Can I write colored text?

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 ="#ff000=" for Web page purposes. For a basic color selection (you can [[StandardColors][StandardColor]] names instead of hex code in the =font= tag only):

<table>
<tr bgcolor="#e0e0e0">
  <td><font color="#000000"> *Black:* </font></td><td> ="#000000"= </td>
  <td><font color="#008000"> *Green:* </font></td><td> ="#008000"= </td>
  <td><font color="#c0c0c0"> *Silver:* </font></td><td> ="#c0c0c0"= </td>
  <td><font color="#00ff00"> *Lime:* </font></td><td> ="#00ff00"= </td>
</tr><tr bgcolor="#c0c0c0">
  <td><font color="#808080"> *Gray:* </font></td><td> ="#808080"= </td>
  <td><font color="#808000"> *Olive:* </font></td><td> ="#808000"= </td>
  <td><font color="#ffffff"> *White:* </font></td><td> ="#ffffff"= </td>
  <td><font color="#ffff00"> *Yellow:* </font></td><td> ="#ffff00"= </td>
</tr><tr bgcolor="#e0e0e0">
  <td><font color="#800000"> *Maroon:* </font></td><td> ="#800000"= </td>
  <td><font color="#000080"> *Navy:* </font></td><td> ="#000080"= </td>
  <td><font color="#ff0000"> *Red:* </font></td><td> ="#ff0000"= </td>
  <td><font color="#0000ff"> *Blue:* </font></td><td> ="#0000ff"= </td>
</tr><tr bgcolor="#c0c0c0">
  <td><font color="#800080"> *Purple:* </font></td><td>="#800080"= </td>
  <td><font color="#008080"> *Teal:* </font></td><td> ="#008080"= </td>
  <td><font color="#ff00ff"> *Fuchsia:* </font></td><td> ="#ff00ff"= </td>
  <td><font color="#00ffff"> *Aqua:* </font></td><td> ="#00ffff"= </td>
</tr>
</table>

   * __You enter:__ <code> &lt;font color="#ff0000"&gt; Red color &lt;/font&gt; draws attention. </code><p>
     __Result:__ <font color="#ff0000"> Red color </font> draws attention.

-----
</blockquote>

-- PeterThoeny - 13 Sep 2001 <br />
-- MikeMannix - 14 Sep 2001 <br />
This topic: TWiki > TextFormattingFAQ
Topic revision: r10 - 2001-09-15 - MikeMannix
Copyright © 1999-2025 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.TextFormattingFAQ.