Text Formatting

The text formatting system allows for deep customization of the text displayed on cards. This formatting always begins with <TAG> and ends with </TAG>. All text between the start and end of the formatting will be affected.

For example, “This text is <b>bold</b>, this is not” would format to “This text is bold, this is not” when displayed on a card. You can also use multiple formats at once. E.g. “This text is <size=150%><b>bold</b></size>, this is not”. If you don’t provide an ending (E.g. </b>), the formatting will just continue for the rest of the text with no issue. Not all formatting has a </> ending

Examples

• <b> Make text Bold </b>

• <i> Make text Italic </i>

• <u> Underlines text </u>

• <s> Strikes through text </s>

• <br> Add a line-break.

• <color=red> Change text color to red </color> (Supports black, blue, green, orange, purple, red, white, and yellow.)

• <color=#00FF00"> Change text color to hex value </color>

• <alpha=#40> Change text transparency <alpha=#ff> (It works with hexadecimal values. From 00 transparent to ff opaque.)

• <mark=#ffff00aa> Highlights text with semi-transparent color </mark>

• <uppercase> Converts text to uppercase </uppercase>

• <lowercase> Converts text to lowercase </lowercase>

• <size=150%> Scales text size to percentage </size>

• <rotate=25> Rotates characters by given angle in degrees </rotate>

• <font=”Forte”> Change font to specified typeface </font>

  NB: The <font> text format is intended to be light-weight. It does not support outlines, shadows or custom fonts.

• <voffset=0.25em> Offsets text vertically </voffset>

• <cspace=0.25em> Increases character spacing </cspace>

• <space=1em> Inserts horizontal space.

• <align=”left”> Left-aligned text </align>

• <align=”center”> Center-aligned text </align>

• <align=”right”> Right-aligned text </align>

• <align=”justified”> Stretched to fill the display area (Except for the last line) </align>

• <align=”flush”> stretched to fill the display area (including the last line) </align>

• <indent=10%> Indents the first line </indent>

• <line-height=50%> Sets line spacing. (You can also use a number, e.g. <line-height=0>)

• <line-indent=10%> Indents each line.

• <margin=0.5em> Adds margin on both sides.

• <margin-left=0.5em> Adds left margin.

• <margin-right=0.5em> Adds right margin.

• ^{Superscripts text}

• _{Subscripts text}

• <sprite=35> Place the 35th text icon from the text icon picker into the text </sprite> (Using the index is faster than asset name, especially when projects grow to 1000+ cards).

• <sprite=5 color=#ff0000> Same as above, but assign a color tint to the icon </sprite>

• <sprite=”custom_img2”> Finds the text icon based on asset name </sprite> (This requires you to first import the image into the text icon picker.)

• <curve=0.9> Curve the text </curve> (This formatting requires the </curve> to apply. The first value is the strength modifier, and this can be set to negative to invert the curve. The second value <curve=0.9,22.5> is an optional rotation modifier that can be applied to the characters, as some fonts might look off with the default value.)

Unicode characters

Card Engine supports a lot of them, just not the higher code points like Emojis. To render a Unicode character, do \uXXXX. Like \u2665 to render a heart ❤, or just copy and paste one from elsewhere. If it's not supported it'll just render a square