BBcode

Contents 1 Why BBcode 2 Text Styling Tags 2.1 Bold 2.2 Italics 2.3 Underline 2.4 Subscript 2.5 Superscript 2.6 Font Color 2.7 Font Size 2.8 Font Face 2.9 Text Alignment 2.10 Headings 3 Lists 3.1 Ordered Lists 3.2 Unordered Lists 4 Links 4.1 URLs 4.2 E-mails 5 Images 5.1 Inline images 5.2 Float left 5.3 Float right 6 Text Blocks 6.1 Code 6.2 Quote 6.3 Spoiler Tag 7 Also see 8 External links

This section will discuss and demonstrate the various tags supported by FUDforum's BBcode implementation (also called FUDcode).

Why BBcode

In most cases allowing users to enter HTML inside their message is impractical for security and stylistic reasons, FUDforum offers a large set of it's own formatting tags that will internally be converted to HTML. Thus preventing users from compromising security by inserting hostile JavaScript in to their messages and intentionally or unintentionally breaking the layout of the forum.

Majority of the BBcode tags can be easily accessed via a toolbar at the top of the post form, which allows the user to use the tag without necessarily knowing how the tag itself works.

Note that users can select a block of text and then click on the toolbar option for a particular test styling element. This text styling then will be applied to the selected text.

Text Styling Tags

The following tags allow the user to transform their text in a certain fashion.

Bold

Text between the [b] and [/b] tags will be made bold using the HTML's < b > tag.

ex. [b]bold text[/b] will be converted to bold text

Italics

Text between the [i] and [/i] tags will be italicized using the HTML's < i > tag.

ex. [i]italic text[/b] will be converted to italic text

Underline

Text between the [u] and [/u] tags will be underlined using the HTML's < u > tag.

ex. [u]underlined text[/u] will be converted to underlined text

Subscript

Text between the [sub] and [/sub] tags will be subscripted using the HTML's <sub> tag.

ex. [sub]subscript text[/sub] will be converted to _{subscript text}

The result will look something like this: _{subscript text}

Superscript

Text between the [sup] and [/sup] tags will be superscripted using the HTML's <sup> tag.

ex. [sup]superscript text[/sup] will be converted to ^{superscript text}

The result will look something like this: ^{superscript text}

Font Color

The user may specify the color of the text by using the [color] tag, which can accept a hex value representing the color or a color name parameter.

ex. [color=red]red text[/color] will result in red text HTML.

Font Size

The user may specify the font size of the text by using the [size] tag, which can accept a numeric font size ranging from 1 (smallest) to 7 (greatest).

ex. [size=5]big text[/size] will result in big text HTML.

Font Face

The user may specify a font that will be used to render their text by using the [font] tag, which can accept a font name, or a font group as a parameter.

ex. [font=arial]arial font[/font] will result in arial text HTML.

Text Alignment

The user may also specify the alignment of their text by using the [align] tag with a left, right or center parameter.

ex. [align=center]centered text[/align] will result in:

The user may use those tags in combination with each other as the example below demonstrates.

Example: Using Multiple Text Styling Tags

[b]Bold
       [i]Bold Italics
               [u]Bold, Italics and Underlined[/u]
               [color=red]Red, Bold and Italics
                       Still RB&I but now its [sub]Red, Bold, Italics and Subscripted[/sub]
               [/color]
[/i]
[/b]

will be rendered as:

Bold
       Bold Italics
               Bold, Italics and Underlined
               Red, Bold and Italics
                       Still RB&I but now itsRed, Bold, Italics and Subscripted
               
       

Headings

FUDforum supports [h1] to [h4] tags to render level 1 to 4 headings.

For example, text between the [H2] and [/H2] tags will show a level 2 heading.

Lists

FUDcode allows the user to create ordered and un-ordered lists using the [list] BBcode tag.

Ordered Lists

Ordered list will have it's items sequentially numbered by the browser. The user may specify what numbering scheme will be used to identify the the items in the list. Below is the list of the supported parameters for the ordered list.

• [list type=A] The items in the list will be indicated by upper case letters of the alphabet from A to Z.
• [list type=z] The items in the list will be indicated by lower case letters of the alphabet from a to z.
• [list type=1] The items in the list will be indicated by numbers from 1 to infinity.
• [list type=I] The items in the list will be indicated by upper case Roman numerals.
• [list type=I] The items in the list will be indicated by lower case Roman numerals.

Internally FUDforum will convert ordered lists to < ol > tags with an appropriate parameter.

Example: Ordered List

[list type=I]
[*] Item one
[*] Item two
[*] Item three
[/list]				

which will rendered like this:

1. Item one
2. Item two
3. Item three

Unordered Lists

Unordered lists are lists where each item bears no distinguishing mark from another item on the list. There are several types unordered lists that the user can choose form, they are listed below.

• [list type=disc] Items will be indicated by a shaded circle.
• [list type=circle] Items will be indicated by a non-shaded circle.
• [list type=square] Items will be indicated by squares.

Note: [list] tag without a parameter, will be automatically converted to a [list type=disc] by default.

Example: Unordered List

[list type=square]
[*] Item one
[*] Item two
[*] Item three
[/list]

which will rendered like this:

• Item one
• Item two
• Item three

Links

FUDcode allows the user to enter URL and e-mail links in to their messages using the [url] & [email] tags.

URLs

A basic link can be created in a following fashion:

ex. [url]http://fud.prohost.org/[/url] will be converted to http://fud.prohost.org/ by the BBcode parser.

To enter a link with a description other then the URL itself, the user may use the [url] tag in the following fashion:

ex. [url=http://fud.prohost.org/]FUDforum Homepage[/url] will result in FUDforum Homepage HTML being generated.

FUDcode parser will also convert valid URLs into links by using functionality similar to the basic link.

ex. http://fud.prohost.org/ will be converted to http://fud.prohost.org/ by the BBcode parser.

E-mails

A basic e-mail link can be created in a following fashion:

ex. [email]myname@mydomain.com[/email] will be converted to myname@mydomain.com by the BBcode parser.

To enter a e-mail link with a description other then the e-mail address itself, the user may use the [email] tag in the following fashion:

ex. [email=myname@mydomain.com]Click Here to Send an E-mail[/email] this will result in Click Here to Send an E-mail HTML being generated.

The BBcode parser will also convert valid e-mail address' into e-mail links by using functionality similar to the basic e-mail link.

ex. myname@mydomain.com will be converted to myname@mydomain.com by the BBcode parser.

Images

FUDcode allows the user to embed images inside their messages using the [img], [imgl] and [imgr] tags. Since embedding of many images can potentially slow down the page the administrator may choose to set a limit on how many messages the users may include inside their messages by using the Maximum Number of Images option in the Forum Manager.

TIP: Large images can disrupt the page flow. Administrators may want to limit the maximum width of images via CSS by adding the max-width property to their css files: img {max-width:400px;}.

Inline images

The most basic way to embed an image is to use the simple [img] tag in the following fashion:

ex.

[img]http://mydomain.com/myimage.jpg[/img]

which will result in the following HTML being generated:

<img src="http://mydomain.com/myimage.jpg" alt="http://mydomain.com/myimage.jpg">

If the user wishes to specify their own description for the image, which will be placed inside the 'alt' parameter of the HTML's image tag they may use [img] tag in the following fashion:

ex. [img=http://mydomain.com/myimage.jpg]My Image[/img] which will result in <img src="http://mydomain.com/myimage.jpg" alt="My Image"> HTML being generated.

Float left

Users can use the [imgl] tag to align or float an image to the left.

Float right

Users can use the [imgr] tag to align or float an image to the right.

Text Blocks

The user may use special tags, which allow them to format large blocks of text in a certain fashion, there are three tags, which allow this type of formatting, [code], [quote] and [spoiler].

Code

This tag is generally used to display program source code within the body of the message. The text between the [code] and [/code] tags will be left as is and not formatted in any way. No other BBcode tags will be applied to this text as well.

Internally [code] tag will be converted to it's HTML equivalent < pre > tag.

ex. [code]Example of the bold tag [b]Bold Text[/b][/code]

will result in

<pre>Example of the bold tag [b]Bold Text[/b]</pre>

HTML being generated.

Quote

Quote tag is generally used automatically by the forum, to surround the text of the message the user is replying to. It can also be used by the user manually to format their text.

The most basic way to use the quote tag is to simply surround the text which is being quoted with the [quote] tags in the following manner:

ex. [quote]Quoted Text[/quote] will result in the following HTML

<cite>Quote:</cite>
 <blockquote>Quoted Text</blockquote>

The user may also use a slightly more advanced version of the quote tag, which permits the specification of a title for the quoted text. This can be done in the following manner:

ex. [quote title="My Title"]Quoted Text[/quote] will result in the following HTML

<cite>"My Title"</cite>
 <blockquote>Quoted Text</blockquote>

Spoiler Tag

This is a very interesting and unique tag, which allows the user to hide portion of their text, so that if other users wish to see it. they would need to click on the 'Reveal Spoiler' link.

This tag is most useful on sites where users may want to post movie or story spoilers and have a way to hide their text so as to not spoil the story/movie for other readers who have not seen/read it yet.

To hide a text string using the spoiler tag, the user will need to place the text between the [spoiler] and [/spoiler] tags in the following fashion:

ex. [spoiler]Movie Spoiler[/spoiler] will result in the following HTML

<div class="dashed" style="padding: 3px;" align="center" width="100%">
	<a href="javascript://" OnClick="javascript: layerVis('1147217758771422496', 1);">Toggle Spoiler</a>
	<div align="left" id="1147217758771422496" style="visibility: hidden;">Movie Spoiler</div>
 </div>

Also see

• Plugins, to implement custom BBcode tags.
• Youtube tag.plugin, implement BBcode tag for embedding Youtube videos into forum posts.

External links

• The BBcode reference site.
• Wikipedia entry about BBcode.