wiki:help/bbcodehowto

Basic Editing: Line Breaks, Paragraphs and White Space

You shouldn't use single line breaks (the [Return] key) within normal text (for example to limit the line length) because this will be handled by XHTML just fine. Use two consecutive line breaks to start a new paragraph. You'll have to start a new paragraph just before each block level element.

Text in the input area will automatically wrap to fit into the area. So please don't be afraid that you might run out of space, when entering a long URL for example. Absolutely don't manually break the line before an URL just to make the URL start in a new line.

White space (the space key, for example) must be put before and after each inline element. Within inline elements, white space must not exist after the start tag, but may exist between words.

Exception to this rule: If you want to mark up only a part of a word you may omit the spaces before the start tag and after the end tag.

Keep in mind that spaces go after full stops ("."), question marks ("?") and similar punctuation characters, but never in front of them.

Hyperlinks (inline)

Emphasis (inline)

  • [i]emphasis[/i]
  • [b]strong emphasis[/b]

Images (inline/block)

Images are inline elements, that are included like this: [img]1.jpg[/img]. If you want to reference an image from a foreign server you do that like this: [img][/img]. You should be aware, however, that most web masters don't approve of this.

Images may have three attributes:

First: [img class="class name"]1.jpg[/img] assigns a CSS class to the image. For example you might have a class named "fr" which will make the image float on the right side. Or you might have a class "photo" which will give a white border to all photos. Separate multiple class names with a single space character, if you want to include more than one class.

Second: [img alt="alternate text"]1.jpg[/img] should be used with every image and will assign an alternate text to the image. This text will be used by browsers that can't display images at all, or when the image can't be displayed right now. Also search engines and disabled users might depend on these alternative representations.

Third: [img caption="Image Caption"]1.jpg[/img] is different from the other two attributes. Using "caption" includes the image into a definition list (which is a block level element) and the "class" attribute will be set on the definition list. Also the definition list will be made as wide as the image. The resulting HTML code might look like this:

 <dl class="photo fr" style="width: 200px;">
  <dt><img alt="A horse" style="width: 200px; height: 150px;" />
   <dd>Image Caption</dd>
 </dl>

This'll only work with images that were uploaded throught the Jlog upload system.

A complete example:

[img class="fr" alt="A huge horse's head" caption="My horse is the prettiest arodun"]http://example.org/img/horse.jpg[/img]

Please be considerate of user with small screens oder windows and especially of modem users and don't use images that are very big. As a rule of thumb don't use anything beyond 500 pixels.

Headline (block)

[headline]First order headline[/headline]

Lists (block)

As with other block elements leave a blank line (e.g. two line breaks) before and after list elements. An unordered list is made like this:

[list]
[*]First point
[*]Second point
[*]Third point
[/list]

Yields:

  • First point
  • Second point
  • Third point

An ordered list looks similar to the unordered list, but you'll have to use [#list] instead of [list]. The result will resemble this:

  1. First point
  2. Second point
  3. Third point

Quotations (block)

Please don't use spaces or line breaks after [quote] or before [/quote]:

[quote]I'm a quote whose only purpose is to demonstrate how things are done the right way. And also to demonstrate that quotations may stretch upon multiple lines.

Or even multiple paragraphs, like this one.[/quote]

HTML

To include regular HTML code which won't be touched by BBCode you may use [html]. In this case it's up to you to do everything properly, including line breaks and paragraphs.