163 lines
7.9 KiB
Plaintext
163 lines
7.9 KiB
Plaintext
%META:TOPICINFO{author="TWikiContributor" date="1111929255" format="1.0" version="19"}%
|
|
---++ Text Formatting FAQ
|
|
|
|
The most frequently asked questions about text formatting are answered. Also, TextFormattingRules contains the complete TWiki shorthand system on one quick reference page.
|
|
|
|
%TOC%
|
|
|
|
---
|
|
---+++ 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 - <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 =%<nop>TOC%= wherever you like on a page (see %TWIKIWEB%.TWikiVariables for more =%<nop>TOC%= options).
|
|
|
|
-----
|
|
#TextEnclosed
|
|
---+++ Text enclosed in angle brackets like <filename> is not displayed. How can I show it as it is?
|
|
|
|
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:
|
|
* =&lt;= = =<= <br />
|
|
=&gt;= = =>=
|
|
|
|
* __You enter:__ =(a &gt; 0)= <p />
|
|
__Result:__ =(a > 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 an exclamation point:
|
|
|
|
* =!WikiStyleWord= displays as !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.
|
|
|
|
---
|
|
#VerbatimText
|
|
---+++ 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 <pre> </pre>, or in TWiki's own <verbatim> </verbatim> tag:
|
|
<pre>
|
|
This text will keep its format as it is:
|
|
<verbatim>
|
|
Unit Price Qty Cost
|
|
------- ------ --- ------
|
|
aaa 12.00 3 36.00
|
|
</verbatim>
|
|
</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.
|
|
|
|
*NOTE:* VARIABLES are still Set within verbatim tags (this is a historical peculiarity)
|
|
|
|
---
|
|
---+++ How do I create tables?
|
|
|
|
There are three possibilities:
|
|
1 Use Wiki rule with "|" vertical bars.
|
|
2 Use HTML tables with <table>, <tr>, <td> tags.
|
|
3 Use preformatted text with <verbatim> 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 <table>, <tr>, <td> tags*
|
|
|
|
This is a manual process using HTML commands.
|
|
|
|
__You enter:__
|
|
|
|
<pre>
|
|
<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>
|
|
</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 <verbatim> tags*
|
|
|
|
See [[#VerbatimText]["Text I enter gets wrapped around..."]]
|
|
|
|
|
|
---
|
|
|
|
---+++ 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 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 [[#ImgUpload][accessible]] as a URL.
|
|
|
|
* __You enter:__ <code> %<nop>PUBURL%/%TWIKIWEB%/TWikiLogos/T-logo-80x15.gif logo.</code> <br />
|
|
__Result:__ %PUBURL%/%TWIKIWEB%/TWikiLogos/T-logo-80x15.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 =%<nop>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:__ <code> <img src="%<nop>PUBURLPATH%/%TWIKIWEB%/TWikiLogos/T-logo-80x15.gif" width="80" height="15" border="0" alt="logo" /> logo.</code><br />
|
|
__Result:__ <br /> <img src="%PUBURLPATH%/%TWIKIWEB%/TWikiLogos/T-logo-80x15.gif" width="80" height="15" border="0" alt="logo" /> logo.
|
|
|
|
-----
|
|
---+++ Can I write colored text?
|
|
|
|
TWikiPreferences defines some commonly used colors: *%YELLOW% %<nop>YELLOW%%ENDCOLOR%, %RED% %<nop>RED%%ENDCOLOR%, %PINK% %<nop>PINK%%ENDCOLOR%, %PURPLE% %<nop>PURPLE%%ENDCOLOR%, %TEAL% %<nop>TEAL%%ENDCOLOR%, %NAVY% %<nop>NAVY%%ENDCOLOR%, %BLUE% %<nop>BLUE%%ENDCOLOR%, %AQUA% %<nop>AQUA%%ENDCOLOR%, %LIME% %<nop>LIME%%ENDCOLOR%, %GREEN% %<nop>GREEN%%ENDCOLOR%, %OLIVE% %<nop>OLIVE%%ENDCOLOR%, %MAROON% %<nop>MAROON%%ENDCOLOR%, %BLACK% %<nop>BLACK%%ENDCOLOR%, %GRAY% %<nop>GRAY%%ENDCOLOR%, %SILVER% %<nop>SILVER%%ENDCOLOR%* and *%<nop>ENDCOLOR%*.
|
|
|
|
* __You enter:__ =%<nop>RED% red text %<nop>ENDCOLOR% and %<nop>GREEN% green text %<nop>ENDCOLOR%= <p />
|
|
__Result:__ %RED% red text %ENDCOLOR% and %GREEN% green text %ENDCOLOR%
|
|
|
|
__Note:__ =%<color>%= text must end with =%<nop>ENDCOLOR%= . If you want to switch from one color to another one you first need to end the active color with =%<nop>ENDCOLOR%=, e.g. write =%<nop>RED% some text %<nop>ENDCOLOR% %<nop>GREEN% more text %<nop>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.
|
|
|
|
-----
|
|
|