All Collections
Viz Flowics
Building Blocks
Using the Text Building Block
Using the Text Building Block
Updated over a week ago

The Text Building Block lets you add single or multi-line text layers to your Graphics.

These texts can vary from simple labels to whole paragraphs. Generally, they all need to be visible and readable on the screen, so we provide a set of tools to adjust for each scenario.


Note: An Overlay will be created automatically if you didn't add it to the Tree after adding an element. To learn how to add elements to the Tree, click here‍.


Properties

Use the Inspector‍, right-sidebar, to customize the Text:

Content

Text: here is where you need to type the text you want to show. This field enables you to enter multiple lines of text.

The text element supports the following type of data:

  • Text: to type in text data

  • Number: to type in numeric data, you can set the number of decimals you wish to show and the language format.

When setting the percentage precision of the Mechanic Provider‍, the decimals number set in the Text block shouldn't be lower as the total sum may not be 100%

  • Date: to type in date data, you may set input and output format as well as the Timezone.

Prefix - Suffix

You can add any symbol you would like to show at the beginning or end of the typed text. For example, you can add an @ as a suffix to show the user's account post or a % to show percentage values.

Position and Size

Position: Change the Text position inside the Canvas according to the X and Y axis (in percentage relative to the configured screen resolution).

Size: Change the Text size inside the Canvas according to its width and height (in percentage relative to the configured screen resolution).

Appearance

Opacity: Use it to change the transparency percentage of the Text.

Typography

Reach out to the Typography section of the inspector panel of a selected Text element to change its font, line height, letter spacing, color, and more. You may also upload any custom fonts. To upload a custom font click here.

Among those, you will find Font resizing modes that are the core of the Text element. Learn more about clipping modes by clicking here.

When "None" resizing mode is selected, this input is disabled but still visible

Show on Remote Control.

To show a text field within the Rundown Control/Remote Control and manipulate manually you can enable the 'Show on Remote Control' option in the Graphics Editor

Text Background

Use the Text Background section controls to apply a background color, gradient, or image to the lines of text.

The Padding controls allow you to change the spacing between the characters and the background that contains them.

Right To Left

Bear in mind enabling RTL text will affect the following elements throughout the graphic: Text block, Text Crawler, and Post Content.

Go to the Graphics Package general settings, by clicking on an empty space on the Canvas. Then enable the RTL support by clicking on the toggle.

By enabling this option, the text direction on these elements will be right to left, both on the Canvas and the editable inputs on the Inspector panel.

Did this answer your question?