Save 55% on an XSplit Premium Lifetime License

Redeem offer

Blog

Text Sources Now Support BBcode

table tbody, table tfoot, table thead, table tbody tr:nth-child(even) { background-color: transparent; }

You can now use BBcode in your text sources. This includes adding images and changing text size and color and using css styles!

Here’s a table that shows you the supported tags, what they are used for, and examples on how to use them:

Tag

Purpose

Example

[b]

Makes text bold

Typing in this code:

[b]Title[/b] Text

Shows the following:

Title Text

[color]

Changes the color of the text

You can use either a standard color name or a hexadecimal value.

Code:

[color=red]Title[/color]Text

Result:

Title Text

Code:

[color=#FF0000]Title[/color]Text

Result:

Title Text

[i]

Makes text italic

Code:

[i]Title[/i]Text

Result:

Title Text

[img]

Shows the image indicated

Code:

[img]https://cdn4.xsplit.com/cms/XSplit-logo.svgz[/img]

Result:

[size]

Changes the font size of the text

This uses pixels as its unit of measurement.

Code:

[size=100]Title[/size]Text

Result:

Title Text

[sub]

Changes the text into subscript

Code:

[sub]Title[/sub]Text

Result:

Title Text

sup

Changes the text into superscript

Code:

[sup]Title[/sup]Text

Result:

Title Text

style

Used for detailed CSS styling

[style=styleString]Title[/style]Text

such as

[style=text-decoration:underline;font-variant:small-caps;]Title[/style] Text

Result:

Tɪᴛʟᴇ Text

You can also combine tags. This code, for example:

[size=100][color=red][b]Title[/b][/color][/size] Text

Results in something like:

Title Text

Technical Notes:

  • Since the Text source itself has its own styling, you may use any css style but it is not always guaranteed to be shown properly (this includes, but is not limited to: alignment styles and spacing styles)

  • When using the underlined or strikethrough Text CSS property, setting the color through BBcode is not reflected on the underline or strikethrough stroke (It follows outline color, which in css, is -webkit-text-stroke-color)

  • When used together with the fade effect, please use unusual characters in HTML, for example, “||” (double pipes, without the quotes) as your delimiter, so that you don’t split in-between the tags. Also, please do not place delimiters anywhere between an opening and a closing tag because doing so will only result in the BBcode being applied to the the first fade segment enclosed in the tag.

  • Text source settings such as outline thickness and alignment are computed based on the original font-size. These are some of its consequences:

  • Using the size tag with a relatively smaller value than the computed one and placing a line break, will make it seem that multiple line breaks are present, but it is actually only a single line break with the original font-size

  • Using the size tag with a relatively smaller value than the computed one and adjusting the alignment properties through the align buttons may show limited and unexpected changes.

  • BBcodes may also be used with custom scripts (such as Load Text from File).