Positioning text elements

I have a background image that is the full size of the canvas. I clicked all four sides for pins and sizing, and set scaling to shrink to fit. It works perfectly; as I resize my browser, it adjusts to fill the space.

I added a text element, and positioned it in the center of the canvas. Same settings for pins and sizing as the image. Looks good at full size, but when I shrink the window, the text slowly moves to the right and bottom. I’d like to keep it centered within my canvas.

My goal is to have the image resize to fit the available space, and to keep the text in the same relative position, and for it’s size to also proportionately adjust to the window size, like the image does. Is this possible?

Hi,

Can you post the project…

Sure, here you go - thanks

Archive.zip (300.9 KB)

Possibly not ideal but I put the Text and image in a group.

Text only pinned on all for sides.
Image pinned on all for sides and sized top to bottom, left to right. Scale shrink to fit
Group pinned on all for sides and sized top to bottom, left to right. Scale shrink to fit

house copy.hype.zip (193.8 KB)

If you want the Text to change size you could possibly look at layouts.

Thanks Mark - still not quite what I’m looking for, which may not be possible. Images can be fluid with HTML5, but not so for text - that’s what I really want, flexible text. Maybe by using SVG fonts? Is that possible with Hype?

Have a search on the forum for svg. There is a ton of threads about what can and cannot be done with them as well as example.

:smile:

1 Like