How to keep the text at the same height across screens

Hey @yaustar, back at this again. I get the correct text now, but how can I keep all the text on the correct height across devices?

I was doing this

const shortText = this.entity.children[0];

    let initialPosition = shortText.getLocalPosition().y;

    let finalPosition = initialPosition * (3/window.devicePixelRatio);

    shortText.setLocalPosition(shortText.getLocalPosition().x, finalPosition, shortText.getLocalPosition().z);

but apparently it doesn’t work for all cases ;_;

What do you mean by the ‘on the correct height’?

I have the phone on portrait mode. And there’s a distance between the text and the bottom of the screen. This distance should be the same across devices. When the blend mode is 0.5, this works perfectly. But with the current blend mode, this distance changes across devices. Some texts look like they are further up on the phone, some look like they are further down. I am hoping there is a calculation that can be done to normalize this :pray:. Worst case scenario, I was thinking of using a dummy invisible text with blend mode 0.5, and then could I get the position of this dummy text and apply it to the real text? Obviously not localposition, it would have to be something else right.

Is it not anchored to the bottom edge? Also is the pivot of the text element at the bottom of the element?

It is anchored, yes. And the pivot is correct. But it doesn’t matter for the blend mode of 0. It’s like the bottom changes for each screen with this blend mode…Idk why.

Can you share an example project that shows the issue and where with different screen sizes, it’s different?

1 Like

Sure will do asap, probably in an hour or 2.

Never mind. Not sure what’s going on, but the issue doesn’t happen on an empty project.