Text Formatting

BBcode

J2O uses two systems for formatting text in dynamic content areas. The first is the familiar BBcode from J2Ov1:

[b]Text[/b]	Text
[i]Text[/i]	Text
[u]Text[/u]	Text
[strike]Text[/strike]	~~Text~~
[red]Text[/red]	Text
[blue]Text[/blue]	Text

Textile

The second system, called Textile, is a versatile formatting system that should replace most needs for HTML. It is slightly more complicated than BBcode, but you can do much more with it. Below is basic documentation for Textile. You can read the full documentation, as well as test things, at the Textile homepage.

Phrase Modifiers

Textile provides some easy symbols for formatting parts of text, or "phrases".

_emphasis_	emphasis
__italic__	italic
strong	strong
bold	bold
??citation??	citation
-deleted text-	~~deleted~~
+inserted text+	inserted
^superscript^	^superscript
~subscript~	_subscript
@code@	`computer code`
%span%	span

These are fairly self-explanatory, except for the last one. The % symbols denote a "span", which is simply a way of distinguishing a block of text. Why is it useful, then? It is useful because you can apply formatting to that block with Cascading Style Sheets (CSS). CSS is a formatting system for HTML that lets you customize virtually every aspect of text. There is plenty of information on CSS available on the Internet, but a few examples are shown below. CSS attributes are placed in braces {} right after the % symbol.

%{color: green;}Green text!%	Green text!
%{font-size: 1cm; font-weight: bold;}Big text!%	Big text!
%{text-decoration: overline; letter-spacing: 0.2cm;}Overline and spacing!%	Overline and spacing!

There are several other "phrase" modifiers that are slightly more complicated.

Links
"Jazz2Online":http://www.jazz2online.com	Jazz2Online
"Jazz2Online(A great site!)":http://www.jazz2online.com	Jazz2Online
Images
!/J2Ov2/media/about/labrat.gif!
!/J2Ov2/media/about/labrat.gif(Lab Rat)!
!/J2Ov2/media/about/labrat.gif!:http://www.jazz2online.com
Acronyms
J2O(Jazz2Online)	J2O

Textile can also be disabled for a phrase:

==This _will_ *not* be @parsed@ by Textile==

This _will_ *not* be @parsed@ by Textile

Block Modifiers

In addition to phrases, Textile can also format "blocks". A block is a section of text, such as a paragraph, header, or block quote. This is done by starting a line with a character sequence. Blocks are separated by empty lines. Block modifiers are not very useful for small posts, but they can be used to format articles and longer posts quite nicely. Almost everything is detailed in the following example.

h2. Sample Document

p. This is a paragraph in the sample document. Lorem ipsum dolor sit anret. The quick brown fox jumps over the lazy dog. The rain in Spain falls gently on the plain.

bq. This is a block quote. Block quotes are indented sections of text, usually long quotations from another source.

Here is another paragraph. Paragraphs are automatically created, and don't need the "p." at the beginning unless they need formatting, like the next two.

p=. This paragraph is centered. Notice the = sign.

p>{color: red;}. This paragraph is aligned right (with the > sign) and has a CSS attribute to make it red.

# Here's the first item in a numbered list.
# And the second
# And so on...

* You can also do non-numbered lists.
* Like this.
* And so on...

#{list-style-type: none; padding: 0; background: silver; border: 1px solid black; width: 50%; margin: auto} Lists can also
# have CSS attributes
# just like this!

And here's a final paragraph.

Sample Document

This is a paragraph in the sample document. Lorem ipsum dolor sit anret. The quick brown fox jumps over the lazy dog. The rain in Spain falls gently on the plain.

This is a block quote. Block quotes are indented sections of text, usually long quotations from another source.

Here is another paragraph. Paragraphs are automatically created, and don’t need the “p.” at the beginning unless they need formatting, like the next two.

This paragraph is centered. Notice the = sign.

This paragraph is aligned right (with the > sign) and has a CSS attribute to make it red.

Here’s the first item in a numbered list.
And the second
And so on…

You can also do non-numbered lists.
Like this.
And so on…

Lists can also
have CSS attributes
just like this!

And here’s a final paragraph.

Alignment modifiers for blocks are as follows.

p<. This paragraph is left-aligned.	This paragraph is left-aligned.
h4>. Right-aligned header	Right-aligned header
h4=. Centered header	Centered header
p<>. This paragraph is justified. This means that each line is of equal width, like a newspaper. Notice that the spacing varies on each line, to equalize the width.	This paragraph is justified. This means that each line is of equal width, like a newspaper. Notice that the spacing varies on each line, to equalize the width.

Tables

Tables are the most complicated things in Textile, but they're also the most complicated things in HTML. If you understand HTML tables, this will be easy, but even if you don't know HTML you can look at the examples and explanations and experiment in the test area.

|This|is|a|table|
|with|no|special|modifiers|
|to|change|its|appearance|

This	is	a	table
with	no	special	modifiers
to	change	its	appearance

This	is	another	table
With cells spanning		multiple rows
and multiple columns		using the ’\’
		and ’/’ modifiers
		on individual cells

|_. This|_. Table|_. Has|_. Headers|
|And|CSS|attributes|on|
|{background-color: blue}. cells|and|{background-color:green}. even|entire|
{background-color: silver}. |\4. rows|

This	Table	Has	Headers
And	CSS	attributes	on
cells	and	even	entire
rows

Classes and IDs

Textile provides a way of using the existing CSS attributes of a site. This is with classes and IDs, which specify parts of the stylesheet. Here are several examples that work on J2O.

Jazz Jackrabbit 2 Online