textout/docs/language.rst

The textout BBcode markup language

The BBcode markup language mainly uses tags, which the starting mark looks like [xxx] and the ending mark looks like [/xxx]. You can add an attribute to the starting mark to modify the tag's behaviour.

There is a generic/quick ending mark which looks like [/]. It cannot be used with all tags, so when it is used in the examples below, suppose you can use it, otherwise, it might not be possible (or not implemented yet).

Align the text

To align the text, you can use either [<alignment mode>] or [align=<alignment mode>] with any of the following modes:

• left: the text is left-aligned;
• right: the text is right-aligned;
• center: the text is aligned at the horizontal middle of the document;
• justify: the text is justified, i.e. the text spaces are optimized for the right'n'word to end at the right of the line.

For example, to right-align some text, you could do something like this:

[right]some text[/]

Inserting titles

Do you want to include titles or subtitles to your message, integrated with the website's design? Use the [title] and [subtitle] tags for that:

[title]Just do it![/]
[subtitle]Don't let your dreams be dreams![/]

Notice that this tag cannot embed another tag.

Styling the text

You can add some basic text style by using the following tags:

• [b] for bold text;
• [i] for italic text;
• [u] for underlined text;
• [o] for overlined text;
• [s] or [strike] for striked text.

They can all be ended with the generic ending mark [/].

Changing the text font

You can change the font of the text by using the [font=xxx] (or [xxx] directly, where xxx represents the font identifier) tag. The following fonts are available:

• arial represents Arial;
• comic represents Comic MS;
• tahoma represents Tahoma;
• courier represents Courier;
• haettenschweiler represents Haettenschweiler;
• mono and monospace represents the basic monospace font.

They can be ended with the generic ending mark [/] as well.

Changing the text color

You can change the color of the text using the [color=xxx] (or [xxx] directly for simple colors, where xxx represents the color) tag. This tag accepts several types of values:

• simple color names (inspired from CSS) such as red, blue, green, transparent;
• color hex codes using a hash (#) followed by hex digits, e.g. #01020F, where the first group of hex digits represents the red component from 0 to 255, the second group of hex digits represents the green component from 0 to 255, and the third group of hex digits represents the blue component from 0 to 255. Incomplete composites will be filled by zero on the left (e.g. #0000F is equivalent to #00000F), invalid characters such as A will be replaced by 0s;
• three hex digits codes using # followed by three hex digits, e.g. #123 which will be translated to #112233;
• rgb(<red>, <green>, <blue>), where the red, green and blue components are represented using decimal digits and are between 0 and 255 included;
• rgba(<red>, <green>, <blue>, <alpha>), where the red, green and blue components are expressed as said before and the alpha component is either expressed as a percentage (e.g. 12.34%) or as a proportion between 0.0 and 1.0;
• hsl(<hue>, <saturation>, <light>) or hls(<hue>, <light>,<saturation>);
• hsl(<hue>, <saturation>, <light>, <alpha>) or hls(<hue>, <light>, <saturation>, <alpha>);
• hwb(<hue>, <white proportion>, <black proportion>).

Here are some examples:

[blue]I'm blue![/]
[color=#ff69b4]That color is called “Cuisse de Nymphe émue”![/]
[color=rgb(255, 255,255,0.4)]I'm black![/]
[color=hsl(0,100%, 0.5)]I'm red![/]

Inserting hyperlinks

Creating hyperlinks on a bunch of text is possible through the [url] tag. The URL has to be either absolute, relative, or related to an anchor. It has to be passed to the tag either through the argument (which allows the content to be the displayed title of the link) or through the content if there is no argument. By default, if there is no content and an argument, the argument will be taken as the link title.

Here are examples:

[url]https://planet-casio.com[/]
[url=https://planet-casio.com]Planète Casio[/]
[url=/relative/url.html][/]

For links to profiles, the [profil] and [profile] tags can be used. They take no attribute but take a content which is the user whose the profile is to be linked's name. For example:

[profil]Cakeisalie5[/]

For links to topics and tutorials, the [topic] and [tutorial] tags can be used. They take no attribute but take a content which is the identifier of the topic or tutorial to which to link to. For example:

[topic]234[/]
[tutorial]32[/]

For links to programs, the [program] and [prog] tags can be used. They take no attribute but take a content which is the identifier of the program to which to link to. For example:

[program]3598[/program]

Quoting someone

To quote someone visually, you can use the [quote] tag, which takes the name of the person you're quoting as the attribute and the quote as the content. A quote can contain another one, of course. If there is no name, the display will just be generalistic.

Here are examples:

[quote]Someone said that.[/]
[quote=Cakeisalie5]Ever realized that my name contained “Cake”?[/]

Spoilers/Content Warnings

To hide something behind a deliberate action of your user, usually to avoid hurting people or to hide the solution to a problem, you can use the [spoiler] tag.

[spoiler]This is hidden![/]
[spoiler=Uncover the dark secrets of the night]Boo![/]
[spoiler=Uncover this!|Cover this quick!!]BOOO![/]

Presenting code

There are two code tags:

• [code], which is supposed to be used as a block for multiline code or to isolate the code from the text;
• [inlinecode] or the backquotes to include code in the text.

For example:

[code]Some multiline code, with [center]tags shown as they are[/center].
Incredible, heh?[/code]
[inlinecode]Some inline code.[/inlinecode]
`Some more inline code.`

Inserting an image

In order to insert an image, you will have to use the [img] tag. It will make a new paragraph containing the image which the URL is given in the tag content. The tag can be bundled with some attributes, separated with the pipe (|) character:

• <width>x<height>: set the dimensions to the image. If the width isn't given (i.e. if this attribute starts with x), the height will be set automatically. If the height isn't given (i.e. no x or nothing after the x), the width will be set automatically;
• left, right, center: align the image accordingly;
• float: make the image float, i.e. let the text be where the image isn't.

For example:

[img=right|float|x24]https://example.org/image.jpg[/]

is a right-aligned image, floating (which means text will be allowed on the left of the image), and with a height of 24 pixels and an automatic width.

Planète Casio admins can use the [adimg] tag which is equivalent to the [img] tag but adds the special admin image folder prefix to the image URLs, so this is possible:

[adimg]incredible.jpg[/]

Inserting a video

This BBcode translator has the ability to integrate videos from some online platforms into your message, as a block. To do this, you can use the [video] and [video tiny] tags. For example:

[video]https://www.youtube.com/watch?v=yhXpV8hRKxQ[/]
[video tiny]https://www.youtube.com/watch?v=yhXpV8hRKxQ[/]

Inserting a progress bar

Do you want to present how your project is evolving using a simple graph, the progress bar? This is possible using the [progress] tag, which takes the percentage (between 0 and 100 included) of the advancement as its attribute. For example:

[progress=50]Building a great wall…[/]
[progress=100][/]

Inserting labels and targets

Is your message in several parts and you only want to link one without using an entire separate page for the section? This is the tag you might want to use. To link to a point in your message:

• first, define the label using the [label] tag, with the name of the label as the attribute;
• then link to the label using the [target] tag.

You are not obliged to terminate the [label] tag (the original version of it didn't support the [label] tag termination, in fact). For example:

[label=sometag][subtitle]Some chapter[/subtitle]

...

[target=sometag]Go back to the beginning of the chapter[/]