Localization messing up my UI Layouts

[TrickShotMLG]

I am using the localization package for the first time and encountering a problem where I have no clue how to fix it.
I have defined some localization strings and made my tmpro components localizable. So far so good. But when loading a language, the horizontal/vertical layout groups do not get updated which results in overlapping texts. This only happens if the text is longer in another language. Similarly, the spacing between the text components does not shrink if the words are shorter.

Anybody has a good solution for this problem?

[Kurt-Dekker]

@TrickShotMLG

But when loading a language, the horizontal/vertical layout groups do not get updated which results in overlapping texts. This only happens if the text is longer in another language. Similarly, the spacing between the text components does not shrink if the words are shorter.

There is a ContentSizeFitter component you can add.

Here’s some more possibly-useful reading as you go into this. Disregarding the notes below may result in you having to completely redo your UI, so it’s worth a look.

Here are the official docs on how to make your UI handle various resolutions and aspect ratios cleanly:

Unity - Manual: Designing UI for Multiple Resolutions

Here are some notes on UI Anchoring, Scaling, CanvasScaler, etc:

Inconsistent game object placement/size between two people

It can be very fiddly but it is super-powerful once you reach comfort with the UI. Building upon Praetor’s great post above, let me suggest this approach: make a quick first draft of your UI. in the Unity game window change the shape / dimensions of your Game window (you can even make your own resolutions) see what happens to your UI in this new shape window iterate and fix your anchors and scalings and whatnot Make sure you do not overlook the Canvas Scaler settings. Personally I (almost) …

SOLVED: Game UI Button Size problem

That seems excessive… What is the text of the actual complaint from them? Make something like this with a fixed aspect ratio (in this case 2:1, maybe you need 3:1 or whatever suits your buttons), and ALL your buttons anchored inside it to never move within that box: [7337383--891847--fixed_aspect_ratio_box.png] then anchor that fixed against the bottom center (red dot below). On the ipad it looks like: [7337383--891850--ipad.png] on the iPhone it looks like: [7337383--891853--iphonex.pn…

Usually you need to choose a suitable ScaleMode and MatchMode in the Canvas Scaler and stick with it 100%. Generally if you change those settings you will often need to redo your UI entirely.

Here’s some more fit-inside-UI-content notes:

https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/HOWTO-UIFitContentSize.html

I also use this CanvasScalerOrientationDriver utility to make sharing UI for Landscape / Portrait easier. Read what it does carefully.

https://gist.github.com/kurtdekker/8802b1b6c708637398f8c9167641efd3

[karl_jones]

The property variants system can be used to make adjustments to the UI for each locale.

https://docs.unity3d.com/Packages/com.unity.localization@1.5/manual/LocalizedPropertyVariants.html

[TrickShotMLG]

I am already using the content size fitters, but it does not work. Thats why I am so confused about it

[TrickShotMLG]

Didn’t know about it, but that was I am reading suggests me, that I have to deal with absolute positions in some way and cant just update the ui layout after localization, or did I get that part wrong?

[Kurt-Dekker]

@TrickShotMLG

I am already using the content size fitters,

I see you ticking some boxes above but there’s an actual ContentSizeFitter Component.

Experiment in a simple scene:

• make a long box
• make a horizontal layout group on it
• set it to NOT control child width
• drop a Text in as a child
• put a ContentSizeFitter on it
• set it to track preferred width
• • ignore the warning about parent sizing; that’s only valid if the HLG is controlling width
• put something else after the text so you know it moves
• change the text and watch it grow / expand automatically

On the HLG:

On the child Text:

Some text plus a graphic

and… add some more text, doing nothing else:

[TrickShotMLG]

In the second image on the bottom is the content fitter. In general this component works for me. For example when typing text manually into the text field. However when using localization the layout doesn‘t get updated

[Kurt-Dekker]

@TrickShotMLG

However when using localization the layout doesn‘t get updated

Oh, didn’t notice that… if it’s really just that, maybe it’s a TMPRo bug.

It will probably fix itself if you turn the GameObject inactive, then back to active.

[TrickShotMLG]

This actually solves the issue

What a stupid fix for an even more stupid bug

[Kurt-Dekker]

@TrickShotMLG

This actually solves the issue

It’s the software equivalent of “Did you try turning it off and back on?”

It will always be a way to fix certain bugs. I don’t think we’ll ever reach the point when people don’t forget to add weird edge case event-driven update connections.