Add Text

Draw text on your component. These are all the properties of Add Text and what they do:

Basic Properties

Name

A label that you can use to easily identify this step.

Text

The text that you wish to draw on your component. Use an asterisk (*) to switch to your alternate font, and another asterisk (*) to switch back. If you need to have an asterisk in your font type: \*

Justify

Should the text be aligned left, center, or right?

Font

The font you wish to use to draw the text. You'll be able to choose a font from the  font palette assigned to the same project as as this design.

Font Color

The color of the text to be drawn. This can be the name of a color like blue or a six or eight digit color code like #0000ff or #0000ffff. The eight digit color code allows you to specify an alpha channel (opacity).

Font Size

The size of the font in pixels.

Font Shadow

Enable or disable a shadow for this font.

Font Shadow Color

The color of the shadow to be drawn. This can be the name of a color like blue or a six or eight digit color code like #0000ff or #0000ffff. The eight digit color code allows you to specify an alpha channel (opacity).

Font Shadow Offset X

The number of pixels away from the font the shadow should be drawn on the X axis.

Font Shadow Offset Y

The number of pixels away from the font the shadow should be drawn on the Y axis.

Font Stroke

Enable or disable an outline of this font.

Font Stroke Color

The color of the stroke to be drawn. This can be the name of a color like blue or a six or eight digit color code like #0000ff or #0000ffff. The eight digit color code allows you to specify an alpha channel (opacity).

Font Stroke Width

The number of pixels wide the stroke should be drawn. Should be a number between 1 and 5.

Position X

A number between 0 (left side) and the width of the component that you are designing for (right side).

Position Y

A number between 0 (top) and the height of the component that you are designing for (bottom).

Width

A number between 0 and the width of the component.

Height

A number between 0 and the height of the component.

Advanced Properties

Alternate Font

The font you wish to use to draw the text when an asterisk is used to switch to the alternate font. You'll be able to choose a font from the font palette assigned to the same project as as this design.

Alternate Font Color

The color of the text to be drawn. This can be the name of a color like blue or a six or eight digit color code like #0000ff or #0000ffff. The eight digit color code allows you to specify an alpha channel (opacity).

Alternate Font Size

The size of the font in pixels.

Alternate Font Shadow Color

The color of the shadow to be drawn. This can be the name of a color like blue or a six or eight digit color code like #0000ff or #0000ffff. The eight digit color code allows you to specify an alpha channel (opacity).

Alternate Font Stroke Color

The color of the stroke to be drawn. This can be the name of a color like blue or a six or eight digit color code like #0000ff or #0000ffff. The eight digit color code allows you to specify an alpha channel (opacity).

Outline Text Area

Draws a bounding box around the text area that you have defined with position and size. This is useful to help you place your text in exactly the position you need it.

Fit Text To Box

This will shrink your font size down to attempt to  fit your text into the text area bounding box. This is only applied if the text won't naturally fit. And it will stop shrinking your text once the font size reaches 5px.

Letter Scaling X

A number between -100 and 100. It will shrink or expand the width of your font.

Letter Scaling Y

A number between -100 and 100. It will shrink or expand the height of your font.

Letter Spacing

A number between 0 and 100. It will add extra space between the letters in your text.

Line Spacing

A number beteween 0 and 100. It will add extra space between lines of text when the text wraps.

Opacity

A number between 0 and 100 that represents how translucent this step will be. 0 means that it will be fully invisible (or transparent). 100 means that it will be fully visible (or opaque).

Rotate

A number between 0 and 360. It represents the degrees that this step will be rotated. Rotation is done via the center point.

Conditionally Render

Allows you to turn off this step programatically. If this field has any contents, then it will be processed by the template engine. If after processing the field has any value other than empty or 0, It will render. If it is empty or 0, it will not render, much the same as if you had disabled it.

Still need help? Contact Us Contact Us