The Text Block, provided in Unreal Motion Graphics (UMG), offers a variety of style options and customization. However, you might need a more flexible text block option that supports markup for things like style changes, inline images, hyperlinks, and so on.
The UMG RichTextBlock provides a more flexible text block. It supports markup for things like style changes, inline images, hyperlinks, and so on. UMG RichTextBlock accepts decorator classes, which you can write to define the markup behavior you need in your project. Also, page shows the detailed information about properties, you can set to the RichTextBlock Widget and the Data Table Asset with the Rich Image Row and Rich Text Style Row data types.
The Rich Text Block uses a Data Table Asset to manage added styles and customization. With the help of the Data Table Asset, you will be able to create your own styles. Also, it allows you to write custom decorator classes, that define the markup behavior you need, in your project. The page shows an example of decorator class, RichTextBlockImageDecorator. You can use it as a starting point for experience in writing custom decorator classes.
Get familiar with the content of the page to learn more about the RichTextBlock in UMG, and how you can write custom decorator classes.
Creating and Assigning a Data Table Asset
At first, you should create a Data Table Asset. With the help of the Data Table Asset, you will be able to create different types of data tags and use it with the RichTextBlock Widget in UMG. You can use the Data Table Asset for specifying text styles or images, that you can use inline with rich text via the RichTextBlock.
Create a Data Table Asset like any other asset: click Add New in the Content Browser, then select Miscellaneous > Data Table.
Select either Rich Image Row or Rich Text Style Row in Pick Row Structure window.
The Rich Image Row uses a custom decorator class, which you can find more details about in the Decorator Classes Decorator Classes section.
Rich Image Row Data Type
As an example, the page shows the Rich Image Row data type, which is a custom decorator class. Store images and set up it with different customization options, using the Data Table Asset with the Rich Image Row data type. Due to this, you can use this data as inline images in the text via the RichTextBlock.
Follow the steps below to create and use the Rich Image Row data type of the Data Table Asset.
Create a Data Table Asset, select the Rich Image Row from the drop-down list of the Pick Row Structure window. Also, you can rename this Data Table Asset. For example, put the name "Image_DataTable".
Double-click the created Data Table Asset in the Content Browser to open it in the Data Table Editor.
Click Add in the Data Table Asset panel to add a new row. Create rows in the Data Table Asset for each inline image, that will be used in your text via the RichTextBlock. There are other instruments for rows at the Data Table Asset panel, like: Copy, Paste, Duplicate, Remove.
You can change the row name via the text field of the Row Name section. It is allowed to use prefixes, camel case, and so on.
Set the properties you need for these images under Appearance.
When you have done adding rows, click Save and close the Data Table Asset.
See Properties of the Data Table Asset with Rich Image Row Data Type for more information about these settings.
Rich Text Style Row Data Type
The Rich Text Style Row data type is the default decorator class. With the help of this, you can set text styles, that can be applied to the text via the RichTextBlock.
Follow the steps below to create and use the Rich Text Style Row data type of the Data Table Asset.
Create a Data Table Asset, select the Rich Text Style Row from the drop-down list of the Pick Row Structure window. Also, you can rename this Data Table Asset. For example, put the name "TextStyle_DataTable".
Double-click the created Data Table Asset in the Content Browser to open it in the Data Table Editor.
Click Add in the Data Table Asset panel to add a new row. Create rows in the Data Table Asset for each text style, that will be used in your text via the RichTextBlock. There are other Instruments for rows at the Data Table Asset panel, like: Copy, Paste, Duplicate, Remove.
You can change the name of each row in the text field of the Row Name section. It is allowed to use prefixes, camel case, and so on.
It is recommended to rename the first row of the Data Table Asset to "Default". Due to this, you have defined style of this row as the default style for text in the assigned RichTextBlock.
Set the properties you need for these styles under Appearance.
When you have done adding rows, click Save and close the Data Table Asset.
See Properties of the Data Table Asset with Rich Text Style Row Data Type for more information about these settings.
For correct display of the text, it is necessary to set the font in the Data Table Asset for each Rich Text Style Row. Open Data Table Editor. You should select the text row you want to customize, then go on Appearance > Text Style > Font section of the Row Editor. In new window you need click Gear and enable Show Engine Content. With the help of this you will be able to choose Roboto font or another one you want.
Using Rich Text Block Widgets in UMG UI Designer
You should assign the RichTextBlock widget with the created Data Table Asset. Due to this, you will be able to use configured text styles and inline images from the Data Table Asset via the Designer Viewport.
Add a Rich Text Block Widget
Create a Widget Blueprint: click Add New in the Content Browser, then select User Interface > Widget Blueprint.
You should find a Canvas Panel in the Palette panel on the left side. Drag the Canvas Panel into the Designer Viewport. Find a RichTextBlock in the Palette panel, drag this widget into the Canvas Panel box of the Designer Viewport. You can scale or resize the RichTextBlock box for your needs.
The text box does not scale automatically to fit the text size. If you do not resize the box to fit your text size, some of your text may be clipped and not display properly. Also, you can enable the checkbox of the section Set to Content in the Details panel for automatic resizing text box to content.
Assign a Data Table Asset to a Rich Text Block
Select the added RichTextBlock widget. With the help of the Details panel on the right side, you will be able to assign your Data Table Asset to the RichTextBlock in the Appearance section.
Use the Text Style Set to assign your Data Table Asset with Rich Text Style Rows to the RichTextBlock.
Apply Style to Text
You should assign the Data Table Asset to the RichTextBlock as described before. Follow the steps below to apply the styles from your Data Table Asset to the text.
Select RichTextBlock.
Find the Content section of the Details panel on the right side.
Type your text into the text field of the Text section.
The display text has a style from the row of the Data Table Asset with name "Default". For example, if you typed to the text field "This is some rich text!", it would display with the style you customized in "Default" row of the Data Table Asset.
You can change default text style for the RichTextBlock you defined in the Data Table Asset. Enable the checkbox of the section Override Default Style in the Details panel. Due to this you will be able to customize new default text style in Default Text Style Override section.
In case you need another style from your Data Table Asset, type the name of the style row in enclosed brackets, using the markup <TextStyleRowName>text</>
(where "TextStyleRowName" is the text style Row Name of the Data Table Asset you assigned, "text" – part of text you want to have style from specified row). For example: This is some <RichText.Emphasis>rich</> text!
You can apply different styles for different parts of your text.
T I P: The row name tag in the RichTextBlock is case insensitive to the Data Table Asset rows name.
Decorator Classes
You can include something other than style to your text by using the Decorator Classes. When you create a Decorator Class, you can set up your own markup tags. With the help of this, you will be able to use Slate. It allows you to render other elements seamlessly within your text.
Using Decorators
As an example, the page shows how to include inline images into the text via RichTextBlockImageRowDecorator class. This example helps you to get start using custom decorator classes.
You need to have the created Data Table Asset with Rich Image Row data type (see Creating and Assigning a Data Table Asset section above), and subclass Blueprint Class with RichTextBlockImageRowDecorator Parent Class as a blueprint to configure the instance. Follow the steps below to do this:
Create a new Blueprint class: click Add New in the Content Browser, then select Blueprint Class.
Choose RichTextBlockImageRowDecorator in the Pick Parent Class window and click Select.
Double-click the created Blueprint Class in the Content Browser to open it in the Blueprint Editor.
Assign this Blueprint Class to the Data Table Asset with Rich Image Row data type via the Image Set with the help of the Details panel on the right side.
Having done everything listed above, you are able to add the Decorator Class to your RichTextBlock Widget. Follow the steps below for using inline images from Data Table Asset in your text.
Open your Widget Blueprint.
Find Decorator Classes section under Appearance in the Details panel on the right side.
Click (+) button for adding array element to the Decorator Classes.
Choose the created Blueprint Class in drop-down list.
For inserting inline images from the Data Table Asset, you should use the markup <img id="ImageRowName"/>
(where "ImageNameFromTable" is the Row Name of Data Table Asset you assigned) in the Content section of Details panel. For example, if you typed to the text field With <img id="RichText.Logo"/> inline images!
and click Compile, it would display text with inline images you customized in the Data Table Asset at the row with the name "RichText.Logo".
Adding New Decorators
You can define custom decorator classes, that can leverage Slate to add anything you want inline the text. To do this, you should write two classes: URichTextBlockDecorator
and FRichTextDecorator
. You should set up these classes. Due to this, you will be able to add your Decorator to any RichTextBlock. Use the Decorator Classes array and your markup to parse text with your Decorator.
URichTextBlockDecorator
defines a UObject
to implement CreateDecorator
, which should return a SharedPtr
to the FRichTextDecorator
. Due to this, you can implement any properties and utility functions. Also, you can subclass your Decorator as a Blueprint. It allows to add and use any data you need in RichTextBlock.
Remember, the RichTextBlockImageDecorator
defines a Data Table property. Anything you want to modify in Blueprints should exist in the UObject
.
Setting of the UMG Rich Text Block
This reference section shows the detailed information about properties, you can set to the RichTextBlock Widget and the Data Table Asset with the Rich Image Row and Rich Text Style Row data types.
Rich Text Block Properties
Property |
Description |
|
---|---|---|
Slot (Canvas Panel Slot) |
||
Anchors |
This sets the anchor location for the selected widget.
|
|
Alignment |
Alignment is the pivot point of the widget. Starting in the upper left at (0,0) and ending in the lower right at (1,1). Moving the alignment point enables you to move the origin of the widget. |
|
Size To Content |
When AutoSize is true, it uses the widget's desired size. |
|
ZOrder |
This indicates the order priority for rendering selected widget. Higher values are rendered last, appearing on top. Lower values rendering first and appearing on the bottom. |
|
Content |
||
Text |
This is the text to display in the widget. |
|
Appearance |
||
Text Style Set |
This holds the Data Table Asset, which enables rich text decorators to be used for text and image styles. |
|
Decorator Classes |
This adds the Decorator can be used for selected widget. |
|
Override Default Style |
If sets true, it specifies the default text style for this rich text inline, overriding any default provided in the style set table. |
|
Default Text Style Override |
This sets the text style to apply by default. |
|
Min Desired Width |
This sets the minimum desired size for the text. |
|
Transform Policy |
The text transformation policy to apply to this text block.
|
|
Justification |
This sets how the text is aligned with the margin. |
|
Margin |
This sets the amount of blank space, left around the edges of the text area. |
|
Line Height Percentage |
This sets the amount each line height is scaled by. |
|
Clipping |
||
Clipping |
Controls how the clipping behavior of this widget works. Normally, content, that overflows the bounds of the widget, continues rendering. Enabling clipping prevents that overflowing content from being seen.
Elements in different clipping spaces can not be batched together, so there is performance costs when clipping is applied. Do not enable clipping, unless a panel actually needs to prevent content from showing up outside its bounds. |
|
Overflow Policy |
Sets what happens to text, that is clipped and does not fit within the clip rect for this widget.
|
|
Wrapping |
||
Auto Wrap Text |
If sets true, it wraps the text automatically, based on the computed horizontal space for this widget. |
|
Wrap Text At |
This determines whether text wraps onto a new line when its length exceeds this width. If this value is zero or negative, no wrapping occurs. |
|
Wrapping Policy |
The wrapping policy to use:
|
|
Behavior |
||
Tool Tip Text |
The tooltip text, that is displayed, when the user hovers the mouse cursor over the widget. |
|
Is Enabled |
This sets whether this widget can be modified interactively by the user. |
|
Visibility |
Sets the visibility of this widget.
|
|
Render Opacity |
This sets the opacity of the widget. |
|
Tool Tip Widget |
The tooltip widget, that is displayed, when the user hovers the mouse cursor over the widget. |
|
Cursor |
The cursor to show when the mouse is over the widget.
|
|
Render Transform |
||
Transform |
The render transform of the widget allows for arbitrary 2D transforms to be applied to the widget.
|
|
Pivot |
The render transform pivot controls the location, about which transforms are applied. This value is a normalized coordinate, about which things, like rotations, will occur. |
|
Performance |
||
Is Volatile |
If sets true, this prevents the widget, or its child's geometry, or layout information, from being cached. If this widget changes every frame, but you want it to still be in an invalidation panel, you should mark it volatile, instead of invalidating it every frame. It would prevent the invalidation panel from actually ever caching anything. |
|
Navigation |
||
Left |
Defines navigation when using Left:
|
|
Right |
Defines navigation when using Right:
|
|
Up |
Defines navigation when using Up:
|
|
Down |
Defines navigation when using Down:
|
|
Next |
Defines navigation when using Next:
|
|
Previous |
Defines navigation when using Previous:
|
|
Localization |
||
Force Direction Preference |
Use it for set up a new flow direction.
|
|
Text Shaping Method |
It determines text shaping method, that used within selected widget. When unset, the default is used that is set by Get Default Text Shaping Method.
|
|
Text Flow Direction |
It determines flow direction, that used within selected widget. When unset, the default is used that is set by Get Default Text Flow Direction.
|
Properties of the Data Table Asset with Rich Image Row Data Type
Set the following properties in the Data Table Asset to control the style for images, that used with a RichTextBlock widget.
Property |
Description |
---|---|
Image |
The image to render for this brush. The assigned Asset can be a UTexture, UMaterialInterface, or an object implementing the AtlasedTextureInterface. |
Image Size |
The size of the resource in Slate Units. |
Tint |
Tinting applied to the image. |
Draw As |
How to draw the image.
|
Tiling |
How to tile the image in Image mode.
|
Preview |
Sets how the image should be displayed in the preview box. Horizontal Alignment:
Vertical Alignment:
|
Properties of the Data Table Asset with Rich Text Style Row Data Type
Set the following properties in the Data Table Asset to control the style for text, that used with a RichTextBlock widget.
Property |
Description |
|
---|---|---|
Font |
||
Font Family |
The font object (valid when used from UMG or a Slate widget style asset). |
|
Typeface |
The name of the font to use from the default typeface. If None is initially selected, the first entry (Bold) will be used. |
|
Size |
The font size is a measure in point values. The conversion of points to Slate Units is done at 96 dpi. So, if you are using a tool like Photoshop to prototype layouts and UI mock ups, be sure to change the default dpi measurements from 72 dpi to 96 dpi. |
|
Font Material |
The material to use when rendering this font. |
|
Outline Settings |
Settings for applying an outline to a font.
|
|
Color |
The color and opacity of this text. |
|
Shadow Offset |
It sets how much should the shadow be offset. An offset of 0 implies no shadow. |
|
Shadow Color and Opacity |
The color and opacity of the shadow. |
|
Shadow Background Color |
The background color of selected text. |
|
Highlight Color |
The color of highlighted text. |
|
Transform Policy |
The Text Transform Policy (defaults to None). |
|
Overflow Policy |
Determines what happens to text that is clipped and does not fit within the clip rect of a text widget. |
|
Highlight Shape |
||
Image |
The image to render for this brush. The assigned Asset can be a UTexture, UMaterialInterface, or an object implementing the AtlasedTextureInterface. |
|
Image Size |
The size of the resource in Slate Units. |
|
Tint |
Tinting applied to the image. |
|
Draw As |
How to draw the image.
|
|
Tiling |
How to tile the image in Image mode.
|
|
Preview |
Sets how the image should be displayed in the preview box. Horizontal Alignment:
Vertical Alignment:
|
|
Strike Brush |
||
Image |
The image to render for this brush. The assigned Asset can be a UTexture, UMaterialInterface, or an object implementing the AtlasedTextureInterface. |
|
Image Size |
The size of the resource in Slate Units. |
|
Tint |
Tinting applied to the image. |
|
Draw As |
How to draw the image.
|
|
Tiling |
How to tile the image in Image mode.
|
|
Preview |
Sets how the image should be displayed in the preview box. Horizontal Alignment:
Vertical Alignment:
|
|
Underline Brush |
||
Image |
The image to render for this brush. The assigned Asset can be a UTexture, UMaterialInterface, or an object implementing the AtlasedTextureInterface. |
|
Image Size |
The size of the resource in Slate Units. |
|
Tint |
Tinting applied to the image. |
|
Draw As |
How to draw the image.
|
|
Tiling |
How to tile the image in Image mode.
|
|
Preview |
Sets how the image should be displayed in the preview box. Horizontal Alignment:
Vertical Alignment:
|