About how to add images or binding in rich text in the UE environment.

AlinaEVE · 14 Sep 2023, 10:30

Hello!
I have read the tutorial on RichText and the localization example in UE. I found that I couldn't use BBCode in UE, and I'm not sure what standard is used for rich text in UE. Also, I'm not sure how to add images or binding in RichText in UE. Here is the method I tried.

		<TextBlock >
			<Run>test</Run>
			<InlineUIContainer>
				<Image Source="Resources/Images/Icon/test/gamepad_a.png" Stretch="None"/>
			</InlineUIContainer>
			<Run>Test</Run>
		</TextBlock>
		<!--it worked,But from a development perspective, this approach cannot be used.-->
		
		<TextBlock noesis:RichText.Text="{noesis:LocTable 'test',Key=DescLabel}" Margin="0,150"/>
		<!--it worked-->
		
		<TextBlock noesis:RichText.Text="{Binding TestImage}" Margin="0,250"/>
		<!--it didn't worked-->
		
		<Label Content="{noesis:LocTable 'test1' ,Key=DescLabel}" Margin="0,350" />
		<!--it didn't worked,so i can't use Label in UE?-->
		
		<TextBlock noesis:RichText.Text="There are [i]many[/i] ways to implement localization in [style=ColoredText]NoesisGUI[/style]."  Margin="0,450"/>
		<!--it didn't worked-->
		
		<TextBlock noesis:RichText.Text="{Binding TestText}" Margin="0,550"/>
		<!--it worked-->
		
		<TextBlock noesis:RichText.Text="[Image]/Resources/Images/Icon/test/gamepad_a.png[/Image]"  Margin="0,650"/>
		<!--it didn't worked,it just prints out the path.-->
		
		<TextBlock noesis:RichText.Text="{Binding TestBinding}" Margin="0,750"/>
		<!--it didn't worked,it just prints out the path.-->

TestText = "There are <ItalicText>many</> ways to implement localization in <ColoredText>Noesis</>. In this example we are using our <ColoredItalicText>LocTable</> markup extension to integrate with Unreal localization system where we defined localized texts for each label. Each time the language is changed, the displayed text is updated accordingly. The <ColoredItalicText>RichText</> attached property for <ItalicText>TextBlocks</> allows you to use Unreal styles and images in your text.";
TestImage = "<img>/Resources/Images/Icon/test/gamepad_a.png</>";
TestBinding = "<bind>TestBinding_</>";
TestBinding_ = "test";

15 Sep 2023, 20:04

In Unreal, RichText is using Unreal-style markup syntax as described here.

I have improved the documentation of RichText to mention this divergence

24 Oct 2024, 11:41

Sorry to resurrect this thread, but it seemed the most appropriate to add to. I've been looking over the RichText Unreal docs, Localisation sample & other samples, but haven't seen and example of how to set certain Rich Text tag types up.

Would it be possible to show an example of the style required for:
- An Image (presume using 'InlineUIContainer'). Doc's mention img an 'id' param, but I'm not figured out how to use that in the style definition.
- A Hyperlink (presume using 'Hyperlink')

I've had both working separately using TextBlocks and Runs, but I want to use them inline in text passed from Unreal localisation.

Thanks

24 Oct 2024, 13:30

In our Unreal RichText, the markup tags are Style keys. An element is created using the Style TargetType, and then that Style is applied to the element. If the TargetType is not an Inline, then the new element is wrapped in an InlineUIContainer.

For an Image, you would set the Source property in the Style, and for Hyperlink you would set the NavigateUri property in the Style (along with any other properties you wanted to set, of course).

Here is an example.

For this RichText:

<Icon/> <WebsiteHyperlink>Visit our website</>

The Styles could be as follows:

<Style x:Key="Icon" TargetType="{x:Type Image}">
  <Setter Property="Source" Value="icon.png"/>
  <Setter Property="Width" Value="32"/>
  <Setter Property="Height" Value="32"/>
</Style>
<Style x:Key="WebsiteHyperlink" TargetType="{x:Type Hyperlink}">
  <Setter Property="NavigateUri" Value="https://www.noesisengine.com/"/>
</Style>

24 Oct 2024, 16:49

Oh, nice. That's easier than I thought. I didn't realise the target type dictates what's created.

I imagine there's a way to push data through from the tags as a binding, for example:

<Icon IconLocation='icon.png'/> <WebsiteHyperlink Link='www.google.com'>Visit our website</>

I will play around with that, Thanks.

24 Oct 2024, 17:02

Unreal RichText does not, currently, support tag properties. Any values (including bindings) will need to be set in a Style. You can create multiple Styles to handle different variations.

About how to add images or binding in rich text in the UE environment. Topic is solved

About how to add images or binding in rich text in the UE environment.

Re: About how to add images or binding in rich text in the UE environment.

Re: About how to add images or binding in rich text in the UE environment.

Re: About how to add images or binding in rich text in the UE environment.

Re: About how to add images or binding in rich text in the UE environment.

Re: About how to add images or binding in rich text in the UE environment.

Who is online