Ui XML Reference\Text

A text frame, displays simple text. This frame type has a default size of 0 and expands to fit its text.

Example Usage

<Text layout="flex" text="Text Frame" />

This XML produces the following UI:
image

text

Value type: string

Supports data binding

Description


The text in the text frame.

Example Usage

<Text layout="flex" text="Text Frame" />

textExpression

Value type: string

Supports data binding

Description


The expression for the text in the text frame. Data bound values can be formatted to specific decimal values by appending the expression such as :F2.
(You can find more documentation here). DreamEditor also provides an additional specifier :K to format huge numbers as "xxxK", "xxxM" or "xxxB". The default parameter for :K is :K2. When binding units or data, make sure to bind the data before creating the xml frame in lua. For a list of fields that can be accessed after the unit is bound, see Data-Binding.

Example Usage

<Text layout="flex" textExpression="{data.text}" />

Where {data.text} is declared and bound in lua before the text frame is created:

local data = {text = "Text Frame"}
DCEI.BindLuaTable("data", data)
local xml = DCEI.CreateFrameFromXml(DCEI.GetUiRootFrame(), "text")

translationKey

Value type: string

Supports data binding

Description


The translation key for the text frame. This uses a translation key declared in the Data Window (Localization tab) to display text across different languages.

Example Usage

<Text layout="flex" translationKey="key" />

fontSize

Value type: number

Supports data binding

Description


The font size for the text frame.

Example Usage

<Text layout="flex" text="Text Frame" fontSize="40" />

fontSizeMin

Value type: number

Supports data binding

Description


The minimum font size for the text frame. Does not work if there is a set font size.

Example Usage

<Text layout="flex" text="Text Frame" fontSizeMin="40" />

fontSizeMax

Value type: number

Supports data binding

Description


The maximum font size for the text frame. Does not work if there is a set font size.

Example Usage

<Text layout="flex" text="Text Frame" fontSizeMax="60" />

color

Value type: color

Supports data binding

Description


The font color for the text frame.

Example Usage

<Text layout="flex" text="Text Frame" fontSize="40" color="r: 1, g: 0, b: 0, a: 1" />

outline

Value type: boolean

Supports data binding

Description


The status of the text outline for the text frame, where true means the outline is enabled. This is true by default.

Example Usage

<Text layout="flex" text="Text Frame" fontSize="40" outline="false" />

shadow

Value type: boolean

Supports data binding

Description


The status of the text shadow for the text frame, where true means the shadow is enabled. This is true by default, disabling the text shadow will also disable the outline (even if otherwise enabled with outline="true").

Example Usage

<Text layout="flex" text="Text Frame" fontSize="40" shadow="false" />

wrapping

Value type: boolean

Supports data binding

Description


The status of the text wrapping for the text frame, where true means the wrapping is enabled. Wrapping will make the text automatically create new lines if the text would overflow the size of the frame; disabling text wrapping will force the text to display on one line. This is true by default, disabling text wrapping will cause the text to overflow if it is enabled.

Example Usage

<Frame layout="flex" frameImageColor="r: 0, g: 0, b: 0, a: 0.6">
    <Text width="150" text="Text Frame" fontSize="40" wrapping="false" />
</Frame>

rtlSupport

Value type: boolean

Supports data binding

Description


The status of the text RTL support (right to left text) for the text frame, where true means RTL support is enabled. This property is for text that is written right to left, such as Arabic.

Example Usage

<Text layout="flex" rtlSupport="true" />

alignment

Value type: string

Supports data binding

Description


The alignment of the text inside the text frame. Possible values:

start, end, top, bottom, (top|bottom)-(start|end)

Example Usage

<Frame layout="flex" frameImageColor="r: 0, g: 0, b: 0, a: 0.6">
    <Text height="200" width="400" text="Text Frame" fontSize="40" alignment="bottom-end" />
</Frame>

overflow

Value type: boolean

Supports data binding

Description


The status of the text overflow for the text frame, where true means the text will overflow the frame. This is true by default. Text will only overflow if it exceeds the height and width for the text frame. If the text size would exceed the frame size in both height and width, then no text will be displayed at all.

Example Usage

<Frame layout="flex" frameImageColor="r: 0, g: 0, b: 0, a: 0.6">
    <Text height="40" width="150" text="Text Frame" fontSize="40" overflow="false" />
</Frame>

outsideOutline

Value type: boolean

Supports data binding

Description


Adjusts the placement of the outline on the text frame, allowing you to choose between the outer edge and the inside. By default, the outline is positioned inside the text frame. Set to true to place the outline outside the text frame, and false to keep it inside.

Example Usage

<Text layout="flex" text="Text Frame" fontSize="40" outsideOutline="true" outlineWidth="0.5"/>

Outside:
outside
Inside:
inside

outlineColor

Value type: color

Supports data binding

Description


The text outline color for the text frame. Black by default.

Example Usage

<Text layout="flex" text="Text Frame" fontSize="40" outlineColor="r: 1, g: 0, b: 0, a: 1" />

outlineWidth

Value type: number

Description


The text outline width for the text frame, scaled from 0-1. A value less than 0 will disable the outline.

Example Usage

<Text layout="flex" text="Text Frame" fontSize="40" outlineColor="r: 1, g: 0, b: 0, a: 1" outlineWidth="0.5" />

outlineSoftness

Value type: number

Description


The text outline softness for the text frame, scaled from 0-1.

Example Usage

<Text layout="flex" text="Text Frame" fontSize="40" outlineColor="r: 1, g: 0, b: 0, a: 1" outlineSoftness="0.3" />

shadowWidth

Value type: number

Description


The text shadow width for the text frame, scaled from 0-1. A value less than 0 will remove the shadow without removing the outline.

Example Usage

<Text layout="flex" text="Text Frame" fontSize="40" shadowColor="r: 1, g: 0, b: 0, a: 1" shadowWidth="0.5" />

shadowSoftness

Value type: number

Description


The text shadow softness for the text frame, scaled from 0-1.

Example Usage

<Text layout="flex" text="Text Frame" fontSize="40" outline="false" shadowSoftness="0.3" />

shadowColor

Value type: color

Supports data binding

Description


The text shadow color for the text frame.

Example Usage

<Text layout="flex" text="Text Frame" fontSize="40" shadowColor="r: 1, g: 0, b: 0, a: 1" />

shadowDirection

Value type: vector2

⚠️Warning⚠️: This attribute was deprecated at editor version: 0.42.0, and will be removed after 90 days.

Description


The text shadow direction for the text frame. The coordinate's direction is based on the unit circle. The default direction is (0, -1).

Example Usage

<Text layout="flex" text="Text Frame" fontSize="40" outline="false" shadowDirection="x: 1, y: 1" />