Text styling
============

The following tags can be used to style the textual content of the messages.

.. _markup-align:

Alignment
---------

In order to align text, one can either use ``[<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, one can do the following::

    [right]some text[/]
    [align=right]some more text[/]

.. _markup-strong:

Font weight
-----------

In order to have text with more weight, the ``[b]`` tag can be used.
For example::

    [b]Some bold text[/]

.. _markup-italic:

Font style
----------

In order to set the font as italic, the ``[i]`` tag can be used.
For example::

    [i]Some italic text[/]

.. _markup-decoration:

Font decoration
---------------

The following decorations can be applied to text using the following tags:

``[u]``
    The text will be underlined.

``[o]``
    The text will be overlined.

``[s]`` or ``[strike]``
    The text will have a line through.

For example::

    [u]This text is underlined.[/]
    [o]This text is overlined.[/]
    [s]This text is striked through.[/]

.. _markup-font:

Text font
---------

The text font can be set using the ``[font=xxx]`` (or ``[xxx]``
directly, where ``xxx`` represents the font identifier) tag.
The following fonts are available:

``arial``
    Arial.

``comic``
    Comic MS.

``tahoma``
    Tahoma.

``courier``
    Courier.

``haettenschweiler``
    Haettenschweiler.

``mono`` or ``monospace``
    Monospace.

For example::

    [comic]This text is in comic font![/]

.. _markup-color:

Text color
----------

The color of the text can be set 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 <CSS named colors_>`_) 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>)``.

Some examples are::

    [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![/]

.. _CSS named colors: https://drafts.csswg.org/css-color/#named-colors