none
[openafs-wiki.git] / TWiki / TextFormattingRules.mdwn
index f802514..94e4bca 100644 (file)
@@ -5,6 +5,7 @@
         <li><a href="#Using HTML"> Using HTML</a><ul>
             <li><a href="#HTML and TWiki Usability"> HTML and TWiki Usability</a></li>
             <li><a href="#TWiki HTML Rendering"> TWiki HTML Rendering</a></li>
+            <li><a href="#TWiki and _JavaScript"> TWiki and JavaScript</a></li>
           </ul>
         </li>
         <li><a href="#Hyperlinks"> Hyperlinks</a><ul>
@@ -22,7 +23,7 @@
 
 # <a name="TWiki Text Formatting"></a> TWiki Text Formatting
 
-Working in TWiki is as easy as typing in text - **exactly like email**. You don't need to know HTML, though you can use it if you prefer. Links to topics are created automatically when you enter [[WikiWords]]. And TWiki shorthand gives you all the power of HTML with a simple coding system that takes no time to learn. It's all layed out below - refer back to this page in a pop-up window from the **Edit** screen.
+Working in TWiki is as easy as typing in text - **exactly like email**. You don't need to know HTML, though you can use it if you prefer. Links to topics are created automatically when you enter [[WikiWords]]. And TWiki shorthand gives you all the power of HTML with a simple coding system that takes no time to learn. It's all laid out below - refer back to this page in a pop-up window from the **Edit** screen.
 
 <a name="TWikiShorthand"></a>
 
@@ -132,7 +133,7 @@ class CatAnimal {
     </td>
   </tr>
   <tr bgcolor="#ffffff">
-    <td valign="top"><strong>List Item:</strong> %BR% Three spaces and an asterisk. </td>
+    <td valign="top"><strong>List Item:</strong> %BR% Three spaces, an asterisk, and another space. </td>
     <td valign="top"><span style="background: #FFFFCC"><font color="#990000"> <pre>
        * bullet item
 </pre> </font></span></td>
@@ -143,7 +144,7 @@ class CatAnimal {
     </td>
   </tr>
   <tr bgcolor="#ffffff">
-    <td valign="top"><strong>Nested List Item:</strong> %BR% Six, nine, ... spaces and an asterisk. </td>
+    <td valign="top"><strong>Nested List Item:</strong> %BR% Six, nine, ... spaces, an asterisk, and another space. </td>
     <td valign="top"><span style="background: #FFFFCC"><font color="#990000"> <pre>
        * level 1
                * level 2
@@ -158,35 +159,87 @@ class CatAnimal {
     </td>
   </tr>
   <tr bgcolor="#ffffff">
-    <td valign="top"><strong>Ordered List:</strong> %BR% Three spaces and a number. </td>
+    <td valign="top"><strong>Ordered List:</strong> %BR% Three spaces, a number, a dot, and another space. Several types are available besides a number: <table border="1" cellpadding="0" cellspacing="0">
+        <tr>
+          <th bgcolor="#99CCCC"><strong> Type </strong></th>
+          <th bgcolor="#99CCCC"><strong> Generated Style </strong></th>
+          <th bgcolor="#99CCCC"><strong> Sample Sequence </strong></th>
+        </tr>
+        <tr>
+          <td> 1. </td>
+          <td> Arabic numerals </td>
+          <td> 1, 2, 3, 4... </td>
+        </tr>
+        <tr>
+          <td> A. </td>
+          <td> Uppercase letters </td>
+          <td> A, B, C, D... </td>
+        </tr>
+        <tr>
+          <td> a. </td>
+          <td> Lowercase letters </td>
+          <td> a, b, c, d... </td>
+        </tr>
+        <tr>
+          <td> I. </td>
+          <td> Uppercase Roman Numerals </td>
+          <td> I, II, III, IV... </td>
+        </tr>
+        <tr>
+          <td> i. </td>
+          <td> Lowercase Roman Numerals </td>
+          <td> i, ii, iii, iv... </td>
+        </tr>
+      </table>
+      <p>
+      </p>
+    </td>
     <td valign="top"><span style="background: #FFFFCC"><font color="#990000"> <pre>
-       1 Sushi
-       1 Dim Sum
+       1. Sushi
+       1. Dim Sum
+
+       A. Sushi
+       A. Dim Sum
+
+       i. Sushi
+       i. Dim Sum
 </pre> </font></span></td>
     <td valign="top">
       <ol>
         <li> Sushi </li>
         <li> Dim Sum </li>
       </ol>
+      <p>
+      </p>
+      <ol>
+        <li type="A"> Sushi </li>
+        <li type="A"> Dim Sum </li>
+      </ol>
+      <p>
+      </p>
+      <ol>
+        <li type="i"> Sushi </li>
+        <li type="i"> Dim Sum </li>
+      </ol>
     </td>
   </tr>
   <tr bgcolor="#ffffff">
-    <td valign="top"><strong>Definition List:</strong> %BR% Three spaces, the term, a colon, a space, followed by the definition. %BR% <strong><em>Note:</em></strong> Terms with spaces are not supported. In case you do have a term with more then one word, separate the words with dashes or with the <code>&amp;nbsp;</code> non-breaking-space entity. </td>
+    <td valign="top"><strong>Definition List:</strong> %BR% Three spaces, a dollar sign, the term, a colon, a space, followed by the definition. </td>
     <td valign="top"><span style="background: #FFFFCC"><font color="#990000"> <pre>
-       Sushi: Japan
-       Dim&amp;nbsp;Sum: S.F.
+       $ Sushi: Japan
+       $ Dim Sum: S.F.
 </pre> </font></span></td>
     <td valign="top">
       <dl>
-        <dt> Sushi</dt>
+        <dt> Sushi </dt>
         <dd> Japan </dd>
-        <dt> Dim Sum</dt>
+        <dt> Dim Sum </dt>
         <dd> S.F. </dd>
       </dl>
     </td>
   </tr>
   <tr bgcolor="#ffffff">
-    <td valign="top"><strong>Table:</strong> %BR% Any number of lines of text. Each line is one row of the table consisting of one or more cells. Each cell starts and ends with a vertical bar '|'. Any spaces at the beginning of a line are ignored.%BR% <strong><em>Notes:</em></strong> %BB% <code>| *bold* |</code> cells are displayed as table headers.%BB% <code>|   center-spaced   |</code> cells are displayed center aligned.%BB% <code>|     right-spaced |</code> cells are displayed right aligned.%BB% <code>| 2 colspan ||</code> cells are displayed as multi-span columns (i.e., a cell with no text spans a column).%BB% <code>|^|</code> cells with a caret indicate follow-up rows of multi-span rows.%BB% If a row contains a large amount of text, and you want it to be more readable while editing the table, split the row into multiple text lines by ending each line with a backslash character <code>'\'</code>.%BB% Table cells wrap automatically as determined by the browser. </td>
+    <td valign="top"><strong>Table:</strong> %BR% Any number of lines of text. Each line is one row of the table consisting of one or more cells. Each cell starts and ends with a vertical bar '|'. Any spaces at the beginning of a line are ignored.%BR% <strong><em>Notes:</em></strong> %BB% <code>| *bold* |</code> cells are displayed as table headers.%BB% <code>|   center-spaced   |</code> cells are displayed center aligned.%BB% <code>|     right-spaced |</code> cells are displayed right aligned.%BB% <code>| 2 colspan ||</code> cells are displayed as multi-span columns (i.e., a cell with no text spans a column).%BB% <code>|^|</code> cells with a caret indicate follow-up rows of multi-span rows (this functionality is provided by [[Main/TablePlugin]]).%BB% If a row contains a large amount of text, and you want it to be more readable while editing the table, split the row into multiple text lines by ending each line with a backslash character <code>'\'</code>.%BB% Table cells wrap automatically as determined by the browser. </td>
     <td valign="top"><span style="background: #FFFFCC"><font color="#990000"> <pre>
 | *L* | *C* | *R* |
 | A2 |  2  |  2 |
@@ -194,6 +247,7 @@ class CatAnimal {
 | multi span |||
 | A4-6 | four | four |
 |^| five | five |
+
 |^| six | six |
 </pre> </font></span></td>
     <td valign="top">
@@ -245,13 +299,17 @@ Know.ReadmeFirst
     </td>
   </tr>
   <tr bgcolor="#ffffff">
-    <td valign="top"><a name="SquareBrackets"></a> <strong>Forced Links:</strong> %BR% You can create a forced internal link by enclosing words in double square brackets. %BR% <strong><em>Note:</em></strong> Text within the brackets may contain optional spaces; the topic name is formed by capitalizing the initial letter and by removing the spaces; for example, <code>[[text formatting FAQ]]</code> links to topic [[Main/TextFormattingFAQ]]. You can also refer to a different web and use anchors. %BR% <strong><em>Note:</em></strong> To "escape" double square brackets that would otherwise be a correct link, use <code>&lt;nop&gt;</code> between the leading left square brackets, that is, begin with <code>[&lt;nop&gt;[....</code></td>
+    <td valign="top"><a name="SquareBrackets"></a> <strong>Forced Links:</strong> %BR% You can create a forced internal link by enclosing words in double square brackets. %BR% <strong><em>Note:</em></strong> Text within the brackets may contain optional spaces; the topic name is formed by capitalizing the initial letter and by removing the spaces; for example, <code>[[text formatting FAQ]]</code> links to topic [[Main/TextFormattingFAQ]]. You can also refer to a different web and use anchors. %BR% <strong><em>Note:</em></strong> To "escape" double square brackets that would otherwise be a correct link, prefix the leading left square brackets with an exclamation point, that is, begin with <code>![[....</code></td>
     <td valign="top"><span style="background: #FFFFCC"><font color="#990000"> <pre>
 [[wiki syntax]]
 
 [[Main.TWiki users]]
+
+escaped:
+![[wiki syntax]]
 </pre> </font></span></td>
     <td valign="top">[[Main/WikiSyntax]]<p>[[Main/TWikiUsers]]</p>
+      <p> escaped: [[wiki syntax]] </p>
     </td>
   </tr>
   <tr bgcolor="#ffffff">
@@ -281,9 +339,9 @@ Know.ReadmeFirst
     </td>
   </tr>
   <tr bgcolor="#ffffff">
-    <td valign="top"><strong>Prevent a Link:</strong> %BR% Prevent a [[Main/WikiWord]] from being linked by prepending it with the <code>&lt;nop&gt;</code> tag. </td>
+    <td valign="top"><strong>Prevent a Link:</strong> %BR% Prevent a [[Main/WikiWord]] from being linked by prepending it with an exclamation point. </td>
     <td valign="top"><span style="background: #FFFFCC"><font color="#990000"> <pre>
-&lt;nop&gt;SunOS
+!SunOS
 </pre> </font></span></td>
     <td valign="top"> SunOS </td>
   </tr>
@@ -315,8 +373,12 @@ You can use just about any HTML tag without a problem - however, there are a few
 
 ### <a name="HTML and TWiki Usability"></a> HTML and TWiki Usability
 
-- On collaboration pages, it's preferable NOT to use HTML, and to use [[TWiki shorthand|Main/WebHome#TWikiShorthand]] instead - this keeps the text uncluttered and easy to edit.
-- %X% **NOTE:** TWiki is designed to work with a wide range of browsers and computer platforms, holding to HTML 3.2 compatibility in the standard installation - adding raw HTML, particularly browser-specific tags (or any other mark-up that doesn't degrade well) will reduce compatibility.
+- %T% **TIP:** On collaboration pages, it's preferable NOT to use HTML, and to use [[TWiki shorthand|Main/WebHome#TWikiShorthand]] instead - this keeps the text uncluttered and easy to edit.
+- %X% **NOTE:** TWiki is designed to work with a wide range of browsers and computer platforms, holding to HTML 4.0 and XHTML 1.0 compatibility in the standard installation - adding raw HTML, particularly browser-specific tags (or any other mark-up that doesn't degrade well) will reduce compatibility.
+- Recommondations when using HTML:
+  - Use [XHTML 1.0 Transitional](http://www.w3.org/TR/xhtml1/) syntax
+  - Do not span a tag over more then one line
+  - Remove all empty lines. TWiki inserts `<p />` paragraph tags on empty lines, which causes problems if done between tags that do not allow paragraph tags, like for example between table tags.
 
 ### <a name="TWiki HTML Rendering"></a> TWiki HTML Rendering
 
@@ -326,6 +388,16 @@ You can use just about any HTML tag without a problem - however, there are a few
   - This feature allows you to enter an unclosed angle bracket - as a greater than or less than symbol - and have it automatically rendered as if you had entered its HTML character, `&lt;`, ex: <code>**a &lt; b**</code>
   - %T% If you're pasting in preformatted HTML text and notice problems, check the file in a text processor with no text wrap. Also, save without hard line breaks on text wrap, in your HTML editing program.
 
+### <a name="TWiki and _JavaScript"></a> TWiki and JavaScript
+
+You can use JavaScript for your TWiki applications. Since TWiki rendering might interfere with JavaScript code you need to escape it with HTML comments and `<pre>` tags:
+
+    <script language="JavaScript">
+    <!-- Hide JavaScript and <pre> escape TWiki rendering
+    ... put your JavaScript code here...
+    // Stop hiding and stop </pre> escaping TWiki rendering -->
+    </script>
+
 ## <a name="Hyperlinks"></a> Hyperlinks
 
 Being able to create links without any formatting required is a core TWiki feature, made possible with [[WikiWords]]. New TWiki linking rules are a simple extension of the syntax that provide a new set of flexible options.
@@ -368,7 +440,7 @@ Variables are names that are enclosed in percent signs `%` that are expanded on
 
 - There are many more variables, see **[[TWikiVariables]]**.
 
-- To "escape" a percent sign that would otherwise be interpreted as a variable, add `<nop>` after the first percent sign. Write: <code><span><font> %&lt;nop&gt;SOMEVARIABLE% </font></span></code> to get: %SOMEVARIABLE%.
+- To "escape" a variable, prefix it with an exclamation point. Write: <code><span><font> !%SOMEVARIABLE% </font></span></code> to get: %SOMEVARIABLE%.
 
 ## <a name="TWikiPlugin Formatting Extension"></a><a name="_TWikiPlugin Formatting Extensio"></a> TWikiPlugin Formatting Extensions
 
@@ -398,4 +470,4 @@ TWiki formatting rules are fairly simple to use and quick to type. However, ther
 - **Q:** Why is the `'&'` character sometimes not displayed?
   - **A:** The `'&'` character has a special meaning in HTML, it starts a so called character entity, i.e. `'&copy;'` is the `©` copyright character. You need to escape `'&'` to see it as it is, so write `'&amp;'` instead of `'&'`. <br /> Example: Type `'This &amp; that'` to get `'This & that'`.
 
--- [[MikeMannix]] - 02 Dec 2001 <br /> -- [[PeterThoeny]] - 15 Jul 2003
+-- TWiki:Main.MikeMannix - 02 Dec 2001 <br /> -- TWiki:Main.PeterThoeny - 25 Apr 2004