Text objects

Table of content:

• Bounding Box (Max Width & Max Height)
• How to connect a text input field
• Font & Style properties
• Importing custom fonts
• Auto linebreaks property
• Text Align property
• Enforce Uppercase

Bounding Box (Max Width & Max Height)

A text will never overflow out of its defined bounding box. If you or your template's users type more text than would fit at the default style settings, the font size will automatically be reduced to fit the text. This type of adaptive text behavior is sometimes called "shrink to fit."

Five properties define the position and size of a text object's bounding box: Origin, X, Y, Max Width and Max Height.

Origin: By default, the origin of a text object is set to top-left. That means that all text expands from left to right and from top to bottom. The origin property also defines the relative position of the object's anchor point, which is the point to which the X and Y properties refer.

X: The X property is the distance from the left edge of the canvas to the anchor point defined by the origin.

Y: The Y property is the distance from the top edge of the canvas to the anchor point defined by the origin.

Max width: The max width defines the width of the bounding box. Note that the actual width of the text depends on the content and properties such as the font or font size.

Max height: The max height defines the height of the bounding box. Note that the actual height of the text depends on the content and properties such as the font or font size.

How to connect a text input field

To allow users to edit the content of a text object, you need to connect a text input field to the text content property.

Font & Style properties

Font family

You can quickly import and use any Google Font in your projects. You can also use a custom font by uploading the font files to your project.

Font style

Not all fonts have or support every font style. Especially if you have uploaded a custom font, the available font styles depend on the files you have uploaded. Some fonts may not display any style options at all.

Font size

The font size property is best understood as the default font size that a text will start with, until it is forced by the bounding box to reduce the actual font size.

Line height

The line height property defines the gap between each line of text.

Letter spacing

The letter spacing property defines the gap between each individual character.

Importing custom fonts

You can upload custom fonts in the Fonts Manager. Open the Fonts Manager and click on "Upload Font." Then select the font file you want to import. You can upload multiple font files—i.e., different styles of the same font family—at the same time to create one multi-style font.

Supported file formats are ttf, otf, woff and woff2.

Auto linebreaks property

By default, auto linebreaks are enabled. This will cause automatic text wrapping to prevent the text from shrinking as much as possible.

If you disable auto linebreaks, the text will shrink to fit into a single line. Manual linebreaks are still possible, however.

Text Align property

Text align works slightly differently in Bluepic STUDIO than in many other traditional design tools because of its interaction with the origin property. If you set the text align property to centered while leaving the origin at top-left, the result will look similar to this:

Notice that all lines of text are center aligned relative to each other, but the entire text is not center aligned within the bounding box. The alignment of the entire text is controlled by the origin property. If, in this example, the origin is set to center-center, the result is this:

In many cases, you need to change both the origin and the text align property if you want centered or right-aligned text in your design.

Enforce Uppercase

If the Enforce Uppercase property is enabled, all characters of the text content will be displayed in uppercase, regardless of how they are typed.