Markup Reference for Richtexts

Markup Reference of the Richtext Renderer

The richtext renderer consists of two elements, <rt> for richtext block and <p> as a text format block. Every text starting with <rt> in multiline textarea can display richtexts.

Richtext Block <rt>

A richtext block holds many <p> format blocks, and can display one or many images. At least one richtext block and one format block is needed for displaying any stlyed text, so the minimum you need would be: <rt text-align=center><p font-face=Verdana>Hello World</p></rt>

Attributes

image=icon.png

If more than one image should be displayed you can seperate images with a ";" f.ex. image=icon1.png;icon2.png

image-align=left/center/right

Defines alignment of images, standard is image-align=left.

text-align=left/center/right

Defines the text align for the whole richtext block, standard is text-align=left

Format Block <p>

A format block is used to style text. Unlike in previous versions you can use many text styles on the same line. If you want yellow text in Verdana use the following: <p font-face=Verdana font-color=#FF0000>This is red text</p>

Attributes

font-size=12

Defines the font size of the current block, standard is 10

font-color=#000000

Defines the font color, it's a hex triple like in HTML, first two numbers are red, next two green and last one blue. Standard is #FFFF00

font-weight=bold

Marks a bold text, standard is not bold.

font-style=italic

Marks the text as italic, standard is not italic

font-decoration=underline

Marks an underlined text

Notice the above three cannot be set altogether, because of a bug in SDL_TTF library (according to Wesnoth doc.), which may cause a crash.

line-spacing=3

Defines the additional space between the lines. ATTENTION: This is useless currently, this attribute should belong to the richtext block.

Additional tags

<br> Tag is used to indicate a linebreak, normal \n is ignored!

Examples

Underlined heading and normal text in next line:
<rt><p font-decoration=underline font-size=14>Heading<br><br></p><p font-size=12>Normal text</p></rt>

Image line with some centered coloured text beneath it:
<rt image=img.png;img2.png;img3.png></rt><rt text-align=center><p font-color=#FF00FF>Colored text, </p><p>standard colored text.</p></rt>