Text Formatting

Card Engine has a text formatting system similar to rich text that 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.

Examples

  • <b> </b> Make text Bold.

  • <i> </i> Make text Italic.

  • <u> </u> Underlines text.

  • <s> </s> Strikes through text.

  • <color=red> </color> Changes text color to red.

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

  • <alpha=#40> <alpha=#ff> Sets text transparency (from 00 transparent to ff opaque).

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

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

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

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

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

  • <font=”Forte”> </font> Changes font to specified typeface.

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

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

  • <space=1em> Inserts horizontal space.

  • <align=”right”> </align> Aligns text to the right.

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

  • <line-height=50%> Sets line spacing.

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

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

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

  • <sup> </sup> Superscripts text.

  • <sub> </sub> Subscripts text.

  • <sprite=35> Places the 35th text icon from the text icon picker into the text. (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=”custom_img2”> Finds the text icon based on asset name. This requires you to first import the image into the text icon picker.