Unity difficulty placing text within the reference resolution of the canvas

Question

I have a TextMeshPro GameObject, which I placed within the Canvas. The canvas is set to Scale with Screen Size and has a reference resolution of 1440x1080.

The TextMeshPro GameObject is anchored to the top-right and its position horizontally is -185 from the anchored point (top-right). And within 1440x1080 resolution it looks like:

But when I make my Display resolution higher or smaller (like for example 1920x1080 as in the image below), the TextMeshPro GameObject goes outside game and ends up in the black area.

I tried changing the position of TextMeshPro GameObject via a script attached to the canvas. I came up with the following formula but it seems wrong.

DisplayResolution.x - (DisplayResolution.X + (ReferenceResolution.X - TextMeshPro.Location.X))

Assuming:

DisplayResolution.X = 1920
ReferenceResolution.X = 1440
TextMeshPro.Location.X = -185

Edit - answer to comments:

Where Starry Backfield is at:

Camera settings:

Canvas Settings:

Answer 1

Ah, the joy of creating resolution-responsive screen layouts in Unity.

If I understand you correctly, your goal is to create an UI which always preserves its aspect ratio, but also fills as much of the screen as possible, letterboxing or pillarboxing as necessary.

If that is the case:

1. If your canvas itself has a Canvas Scaler component, remove it.
2. Add a new empty game object to the canvas (let's call it "Content").
3. Set the anchor preset in the "Content" to "Stretch" in both directions
4. Resize the "Content" to fill the whole canvas.
5. Add an "Aspect Ratio Fitter" to "Content". Set its Aspect Mode to "Fit In Parent" and its "Aspect Ratio" to the ratio of width to height you want it to maintain.
6. Add your UI elements as children of "Content". Make sure their anchors are the corners you want them to stay relative to. For example, if you want your score text to always stay in the upper right corner, set its anchor to upper right and drag it into the upper right corner.
7. [optional] Do you want the elements in "Content" themselves to shrink or enlarge with different screen sizes so they don't overlap on low resolutions and don't become too small on large resolutions? Then add a "Canvas Scaler" to "Content". Set its UI Scale Mode to "Scale With Screen Size" and its Screen Match Mode to "Expand".

Your UI should now behave as described.

Now the next challenge would be to get the rendering of the actual game to behave the same way as the canvas and letterbox/pillarbox as the resolution requires. But that's outside of the scope of this question.

4:3 aspect ratio:

Landscape aspect ratio:

Portrait aspect ratio: