I have text with a fixed width
and I need the distance from the edge of the screen on portrait mode to look the same (the red arrow on the pic below)
How can I go about this? My strategy was this: I have the correct look on a device with pixel ratio 3, so I decided to use 3 as the base and then divide the pixel ratio of the current device by 3 and multiple by the local scale. Like this
initialScale * (window.devicePixelRatio/3);
It almosts looks right, but not quite. What am I missing? Thanks!
Try split anchors first to see if that gives you effect you want: Elements | Learn PlayCanvas
I wouldn’t mess around with scale/pixel device ratio as it shouldn’t be needed
I did try that. The parent of the text has split anchors, and the text itself is anchored at the bottom. Moving the anchors around still make the margin different on my phones.
If the text element has a fixed width, then it’s size isn’t relative to parent.
Can you post an example project for someone to look at please?
Sure https://playcanvas.com/project/978556/overview/test-text . I just tried it with both phones and the problem occurred.
Your text element has a fixed width so it doesn’t resize relative to the parent element.
(There’s also scaling of the text element that threw everything off that I’ve reseted back to 1, 1, 1)
See version here: https://playcanvas.com/project/978571/overview/f-test-text
Assuming you are dealing with vertical screens most of the time:
Hi Yaustar, I appreciate that you looked into this. The reason it has to be a fixed width is because if it isn’t, PlayCanvas messes with the number of lines, margin, etc. You can see on the video that you posted that on some screens there are 3 lines of text, on some there are 4, etc. This has to be the same across devices.
I didn’t know about the trick of setting different phones up there. Does the pixel ratio change as well when you do that?
Yes
In which case, you would have to take the ‘worse’ case scenario which sounds like the narrowest device and size it correctly for that with a fixed width.
After which, it would fit all other wider devices.
In which case, you would have to take the ‘worse’ case scenario which sounds like the narrowest device and size it correctly for that with a fixed width.
After which, it would fit all other wider devices.
Yes, but it needs to look the same as I explained, the margins from the screen edges has to be the same across devices. Client’s requirement ;_;. That’s why it needs to be scaled with some formula.
In which case it would be huge on widescreen devices? It goes back to the question from Discord on what is meant by the ‘same’
Can you show a mock up on what it would look like on portrait devices and what it would look like on widescreen devices?
In which case it would be huge on widescreen devices?
Yes, but the use case is only phones on portrait mode. Forget about everything else, doesn’t matter.
Can you show a mock up on what it would look like on portrait devices and what it would look like on widescreen devices?
On my first post there are some red arrows on the phone, that’s the distance that has to be the same across devices.
I tried out the different phone resolutions on chrome dev tools. Basically when I reduce the width of the screen the text disappears, but it should scale down instead and look the same.
In practice the app will have a fixed width also, no need to be responsive at runtime, just need to set it right once.
Okay that makes it easier. In which case, you want to have a fixed height and enable Auto height that changes the font size to fit in the element bounds height.
Combine that with split anchors on the width, that should get you what you want?
https://playcanvas.com/project/978737/overview/f-test-text-2
Combine that with split anchors on the width, that should get you what you want?
If you change from samsung s8+ to Pixel5, you will notice that the arrangement of the letters changed. On the pixel5 the last line has almost the same width as the line before, but not on samsung s8+ T_T. I can see that this task is harder than I expected it to be T_T.
EDIT
Hm, when I tried on the phones though it looks the same. Can you explain this to me? Why auto fit height? It’s the width that I want the same, this is confusing T_T.
EDIT
It’s not working. I swear it worked once though, wtf.
EDIT
It really doesn’t work Yaustar. I just thought it did. I tested your example project, and the margin is still different. Just start changing the width of the screen to make it smaller and you will see the text letters rearranging instead of everything scaling down to look the same…
Okay, I think I know what you want now.
For this, I would use the shortest screen as your reference such an iPad Mini and size and position a fixed width and height element.
Then I would change the screen blend values so scales according relative to the width of the device.
That will give you this which I think is what you want?
Project: https://playcanvas.com/project/978896/overview/f-test-text-3
YEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEESSSSSSSSSSSSSSSSSSSSSSSSSSSSS.
THANK YOU!! FINALLYYY THE TEXT IS THE FUCKING SAAAAAAAAME 
edit
Ah, the blend mode. I’ll keep that in mind, never had to use it before. Thanks a lot once again!
