UMG layout for subtitles.

[chrisaverage]

Hi, I’m doing an UMG widget for subtitles and trying to achieve something that behaves like this:

The blue one is a Grid with fixed column width ratios. The red and green are Text widgets and the white one is some container (I tried multiple different ones with no success).
Basically I want the white container to be centered within the grid column and the green text to expand horizontally until it fills the width and then grows vertically.

The problem is I can’t get that to work. I’ve tried different containers, wrapping either the white or green box in different widgets and playing around with their properties.

At the end, no matter how I wrap this or what I set I always end in equivalent to one of these two situations. Either the short text fills the width like this:

or the long text refuses to fill the width and only grows vertically:

Anyone has an idea how to set it up so that the green text prefers width over height when expanding until there’s no more room?

I looked at some tutorials and videos, but it seems everybody just joins the two texts together and sets their combined text alignment to center, which IMO looks ugly.

[lordlolek]

Hi,
I think I managed to do it

short text:

long text:

The hierarchy:

Key settings:

• Border is anchored to bottom center with Size to Content option checked

• Horizontal box is aligned to Center
• “Speaker” text box is upper-right aligned, Auto Sized

- “Text” text box is upper-left aligned, Fill Sized

• VERY important: “Text” text box has “Wrap At” value set up to around 1000. In my experience Auto Wrap causes unexpected results while Wrap At is consistent. Adjust the value to your liking.

• Spacer in the middle is optional, you can achieve the same result with Padding on the Text Boxes, but if you do use it, setup it like this

Let me know if it works!

Btw, Border at the top of hierarchy is optional, but it makes it easier to setup the layout and moreover it can help you with some effects and stuff, ie you can easily add Background for high contrast accessability options, or cange the tint of the text etc.

[chrisaverage]

Thank you for taking a stab at it.
Unfortunately hardcoding the wrap width means there’s no control over the “columns”, i.e. if the screen is narrower you loose the left and right empty space (I’m using that space for some UI elements, so they can’t be covered by subtitles). In more extreme case, where the screen would be narrower than 1000 it would cut the text off too, which is a no go. It needs to adjust to the available space. That’s why I have that grid there.

[lordlolek]

That’s correct, but you can set it up to any value, or even control it with some simple scripts to adjust to different vieport sizes, for example:

So in the end you have even more control than in a grid with auto wrap that acts on it’s own.

Do you plan to release for mobiles? Nowadays you need to prepare only for 16:9, ultrawide and 4:3 (very rare but still in play).

With similar setup we’ve succesfully launched several games and there was more HUD elements as well, give it a try.

btw let me show you what Auto Wrap does. Observe how it reacts to changing the contents and zooming in and out. Maybe it’s usefull in some cases but for me it’s the nightmare of unpredictibility: