Text Formatting FAQ
This topics lists frequently asked questions on text formatting. Text formatting applies to people who edit TWiki pages in raw edit mode.
TextFormattingRules contains the complete TWiki shorthand syntax on one quick reference page.
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:
--------------
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?.
- 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).
TWiki interprets text as HTML, and the '<' and '>' 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:
- You enter:
(a > 0) Result: (a > 0)
A red-link points to a topic that doesn't exist yet - click on 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 - prefix the
WikiStyleWord with an exclamation point:
-
!WikiStyleWord displays as WikiStyleWord
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.
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
!, which renders as an exclamation mark, e.g. write
A != B to get "A != B".
The quickest way is to enclose the text in equal signs:
- You enter:
Proportional text, =fixed font=, proportional again. Result: Proportional text, fixed font, proportional again.
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 <pre> </pre>, or in TWiki's own <verbatim> </verbatim> 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.
NOTE: VARIABLES are still Set within verbatim tags (this is a historical peculiarity)
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.
There are three possibilities:
- Use Wiki rule with "|" vertical bars.
- Use HTML tables with <table>, <tr>, <td> tags.
- Use preformatted text with <verbatim> tags.
1. Use Wiki rule with "|" vertical bars
- Example text:
| cell A1 | cell B1 | cell C1 |
| 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 <table>, <tr>, <td> 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:
| Head A | Head B |
| Cell A2 | Cell B2 |
| Cell A3 | Cell B3 |
3. Use preformatted text with <verbatim> tags
See
"Text I enter gets wrapped around..."
Yes. The easiest way is to
attach 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.
To place an image on any topic, there 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:
%PUBURL%/TWiki/TWikiLogos/T-logo-80x15.gif logo.
Result: 
logo.
You can upload images directly to your server with FTP access. You can also
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
Display with %PUBURL%/Someweb/SomeTopic/pic.gif
2. Using <img> tag
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 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.
- You enter:
<img src="%PUBURLPATH%/TWiki/TWikiLogos/T-logo-80x15.gif" width="80" height="15" border="0" alt="logo" /> logo.
Result:
logo.
TWikiPreferences defines some commonly used colors:
%YELLOW%, %RED%, %PINK%, %PURPLE%, %TEAL%, %NAVY%, %BLUE%, %AQUA%, %LIME%, %GREEN%, %OLIVE%, %MAROON%, %BLACK%, %GRAY%, %SILVER% and
%ENDCOLOR%.
- You enter:
%RED% red text %ENDCOLOR% and %GREEN% green text %ENDCOLOR% Result: red text and green text
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%.
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 & NS) browsers have a problem with
style.
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.
--
Contributors: TWiki:Main.PeterThoeny,
TWiki:Main.MikeMannix