UMG RichTextBlock rendering purple squares

In 4.20, you changed how RichTextBlock works.
It was experimental before, and there was a community plugin to use it.

Now that you’ve released it, I kind of expected it to just somewhat work, but it is completely broken. It only renders purple squares with an “A” inside.
The worst thing is that the plugin is broken now, and it will be a hassle to make it work again.

Nothing is mentioned in the 4.20 release notes, which makes me think that it wasn’t even supposed to be released yet.

Hello,

We’ve recently made a switch to a new bug reporting method using a more structured form. Please visit the link below for more details and report the issue using the new Bug Submission Form. Feel free to continue to use this thread for community discussion around the issue.

https://epicsupport.force.com/unrealengine/s/

Thanks

The way I found out how to fix this is to create a textstyleset (it is a datatable btw), add a new row inside of it, set the font settings in said row and name the row to Default. Go back into the richtextblock, set the textstyleset to the datatable you created and type your text in the content box. If you want colors, add a new row and in the content box type “(lessthansign)rowname(greaterthansign) Your text goes here (lessthansign)/(greaterthansign)”. Do note that this is only for text, as for images, I have yet to figure out how to get that to work. Hope this helps though! :slight_smile:

Yeah, I got an email from Epic saying the same thing.

But this is unacceptable. You shouldn’t have to create a row for EVERY single unique thing you need in your RichText.

Say I want to have some text be blue, and in some cases I want it to be 8 font size, and in other cases I want it to be 12 in font size. Then I would have to make 2 different rows in my table. And this is only for 2 font sizes and 1 color. Imagine I wanted to do the same thing with purple, and then a liiiitle bit darker purple. Then we’re up to 6 tables, which all need to have the same outline settings etc, which you have to manually edit EVERY time you want to change it on EVERY row(you can’t select multiple rows).

I agree with you and whats funny is that in earlier versions of the richtextblock, the way to change it was by using span as well as img blocks. If you didn’t want to have different styles, you could change the default style within the appearance tab (so that render issue wasn’t even there). I am shocked to see them change how it worked so much between 4.20 and 4.19.

Also I found out that the RichTextBlockImageDecorator is bugged too. It says that “We recommend you subclass this as a blueprint to configure the instance.” in the documentation, however since the parent class (RichTextBlockDecorator) only contains BlueprintType and not Blueprintable in it’s UCLASS, these classes can’t be created as blueprints so the image decorators can’t even work.

Hopefully they fix this in 4.20.1, but since this stuff wasn’t in the changelog for 4.20, who knows. :confused:

Yeah, let’s hope that they fix it soon. :slight_smile:

My project used the old version, and when I upgraded to 4.20, it completely broke. I’ll hold off on 4.20 until this is fixed.

EDIT: Just heard from the devs, they recommend building a new decorator for inline styling. Though I have no idea how to do this right now. Guess I’ll have to do some research.

Well that’s good at least :slight_smile:

I have the same issues with the changed RichText widget. In my case, players can write their own styled text, so the data table approach won’t work for me. Did you find any other solution, or have you heard anything else from Epic on this issue?

You can create a C++ class that inherits from RichTextBlockImageDecorator and add the proper UCLASS properties so it can be configured in blueprint (i.e. Blueprintable, BlueprintType)

The signs for referencing a row in the Text Style Set data table in your example should also be reversed: “(LessThanSign)rowname(GreaterThanSign)your text(LessThanSign)/(GreaterThanSign)”

Thanks for the info, and I apologize for putting the styling code in reverse. The subclass option works, so now I can create a new decorator and put an image row in it. The one thing that I still can’t understand is how to call said images into the richtextblock. :confused:
I tried using the method that is used for text styling, but to no avail (there is proabably a way to call images in a similar manner though).

Thank you so much! I was wondering how to call the image cause I tried img but I didn’t know you had to put id to call it. At least we finally know how to get it fully working +1 to you :slight_smile:

The comments above really helped, and after scanning the source code for a bit I figured out the expected tags.

As stated above, you need to create a Text Style Sheet with the row type of “Rich Text Style Row”, which then needs to have a “Default” row. Any additional styles can then be added, in my case a “Cool” row that appears blue.

And then you need to tag your input string with " < Style Name> Your Text </>". In my case this was “Hello World</>”.

For the images, it’s a similar process. You’ll need a class that inherits from RichTextBlockImageDecorator, which will need a reference to a data table that uses the “Rich Image Row” row type.

Here you can create a named brush that you can reference in your string. In my case it’s “Face”.

In your input string, you can get that image with < img id=“Face” />.

Hope this prevents someone from spending hours digging through code. It was a really easy thing to spot too, but I had missed it my first time around.

hello ,why i can’t display images , can you please tell me how to display images ?

hello
,Did you finally solve the problem , Can you share how you write…I looked at the results above , but I didn’t show the picture at the end~~~~~

In order to display images first you have to create a c++ class that inherits from RichTextBlockImageDecorator. Once that c++ class is created, open it and look for the UCLASS() line in the header file and replace it with this UCLASS(Blueprintable, BlueprintType). Once you do that, click the compile button and once it completes you can create a blueprint child of the c++ class. From there, open the decorator blueprint you just created and you can add a richtextblockimagerow struct. The struct acts like the text one where you create a new row and add images to it with names as well as brushes. Finally you can add the decorator class into your richtextblock (from the decorator tab by pressing the +). Hope this helps! :slight_smile:

Thank you so very much。 i try to do it , but at my umg display img id=“Row1” , i guess It could be a grammatical mistake , i debug source code , decorator need MetadDate contains “id” , Here’s a screenshot of my operation , Can you please help me see where the mistake ,Thanks again for your help…

For the script replace GENERATED_UCLASS_BODY() with GENERATED_BODY() .
That could be the reason why its not working as everything else looks correct.

just now ,i replaced GENERATED_BODY() , compiled . Still not working properly , display img id = “Row1” , engine version is 4.20.1

wow ,cool ,thank you very much ! i can’t wait want to see…hahah

Here you go, I made a quick video showing how to get it working :slight_smile: