Page 1 of 1

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

Posted: 14 Sep 2023, 10:30
by AlinaEVE
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";

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

Posted: 15 Sep 2023, 20:04
by jsantos
In Unreal, RichText is using Unreal-style markup syntax as described here.

I have improved the documentation of RichText to mention this divergence

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

Posted: 24 Oct 2024, 11:41
by BenJo
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

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

Posted: 24 Oct 2024, 13:30
by maherne
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>

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

Posted: 24 Oct 2024, 16:49
by BenJo
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.

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

Posted: 24 Oct 2024, 17:02
by maherne
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.