No edit summary |
(An attempt to explain how to make sense of the visual formatting/indentation + minor changes.) |
||
| Line 5: | Line 5: | ||
<translate><!--T:1--> | <translate><!--T:1--> | ||
Bulletin Board Codes or BBCodes are a way to format posts in SMF and in many other places online. For an explanation of the buttons | Bulletin Board Codes or BBCodes are a way to format posts in SMF and in many other places online. For an explanation of the buttons on the ''post'' page, see {{llink|Basic Bulletin Board Codes|text=Basic Bulletin Board Codes}}. This article explains the important concept of nesting. | ||
<!--T:2--> | <!--T:2--> | ||
| Line 11: | Line 11: | ||
<!--T:3--> | <!--T:3--> | ||
The general format of a BBCode has three parts: an opening tag, the inside content and a closing tag, as shown below: | The general format of a BBCode tag has three parts: an opening tag, the inside content and a closing tag, as shown below: | ||
{{code|[open] text inside [/close] | {{code|[open] text inside [/close] | ||
[b] bold text [/b]}} | [b] bold text [/b]}} | ||
<!--T:8--> | <!--T:8--> | ||
===When Order Matters Part 1=== | ===When Order Matters, Part 1=== | ||
<!--T:9--> | <!--T:9--> | ||
You can place one BBCode tag inside another as long as ''the child tag is closed before the parent tag''. For example, the correct way to make bold and italic text is: | You can place one BBCode tag inside another as long as ''the child tag is closed before the parent tag''. For example, the correct way to make bold and italic text is: | ||
{{code|[b][i]bold & italic text[/i][/b]}} | {{code|[b][i]bold & italic text[/i][/b]}} | ||
You can also do it in the following way | You can also do it in the following way, which is also valid, with the same tags in reverse order: | ||
<!--T:9.1--> | <!--T:9.1--> | ||
| Line 27: | Line 27: | ||
<!--T:11--> | <!--T:11--> | ||
The correct method | The correct method can be visualized more clearly when tags are indented. Each time a tag is open, it is indented a little more than then previous one, forming an invisible column. When the tag is closed, indentation goes back to the previous column. | ||
{{code|[b] | {{code|[b] | ||
[i] | [i] | ||
| Line 35: | Line 35: | ||
<!--T:12--> | <!--T:12--> | ||
The next example is incorrectly nested | The next example is incorrectly nested. The last two lines show that the parent tag was closed before the child tag. The column that was created by the child tag is cut in two by the closing tag of its parent. | ||
{{code|[b][i]bold & italic text[/b][/i] | {{code|[b][i]bold & italic text[/b][/i] | ||
[b] | [b] | ||
| Line 44: | Line 44: | ||
<!--T:16--> | <!--T:16--> | ||
===When Order Matters Part 2=== | ===When Order Matters, Part 2=== | ||
<!--T:19--> | <!--T:19--> | ||
The order in which tags are nested is important when text-formatting tags like size, bold, or italic are paired with text-alignment tags center, left and right, and pre. Formatting tags must be placed inside alignment tags. For example, for the size tag to change the font, it must be placed as follows: | |||
<!--T:20--> | <!--T:20--> | ||
Revision as of 22:33, 7 August 2013
| Languages | English · Deutsch · Ελληνικά · español · français · italiano · Nederlands · norsk · polski · русский · srpski (latinica) · svenska · Türkçe |
|---|
Bulletin Board Codes or BBCodes are a way to format posts in SMF and in many other places online. For an explanation of the buttons on the post page, see Basic Bulletin Board Codes. This article explains the important concept of nesting.
Nesting BBCodes
The general format of a BBCode tag has three parts: an opening tag, the inside content and a closing tag, as shown below:
[open] text inside [/close] [b] bold text [/b]
When Order Matters, Part 1
You can place one BBCode tag inside another as long as the child tag is closed before the parent tag. For example, the correct way to make bold and italic text is:
[b][i]bold & italic text[/i][/b]
You can also do it in the following way, which is also valid, with the same tags in reverse order:
[i][b]bold & italic text[/b][/i]
The correct method can be visualized more clearly when tags are indented. Each time a tag is open, it is indented a little more than then previous one, forming an invisible column. When the tag is closed, indentation goes back to the previous column.
[b]
[i]
bold & italic text
[/i]
[/b]
The next example is incorrectly nested. The last two lines show that the parent tag was closed before the child tag. The column that was created by the child tag is cut in two by the closing tag of its parent.
[b][i]bold & italic text[/b][/i]
[b]
[i]
bold & italic text
[/b]
[/i]
When Order Matters, Part 2
The order in which tags are nested is important when text-formatting tags like size, bold, or italic are paired with text-alignment tags center, left and right, and pre. Formatting tags must be placed inside alignment tags. For example, for the size tag to change the font, it must be placed as follows:
[center][size=36pt][b][u]text[/u][/b][/size][/center]
Nesting the size tags as per the example below will result in this tag not working:
[size=36pt][center][b][u]text[/u][/b][/center][/size]
