Zooming in changes the content size or display

Hi there!
I was working with Hype and just tried to zoom in to see better what I’m doing and the content is changing the way it is arranged. Is this normal or there is something going on that I’m not getting?

This is how I see it at 100%

This is the same document at 125% zoom

Why the textbox changes its design? I’m not changing the font size or anything, just zooming. Does the zoom tool do something else than “getting closer” or show you the content bigger?

Same happens with the commands cmd+ and cmd- (unfortunately, pinching with the Magic Trackpad is still not supported).

OK, after trying again a few things it seems a /br appeared in the text and for some reason the text box couldn’t display the text just the same, even though to my judgement there was space enough. I dont’ remember ever using a line break in the first place! :woman_shrugging:
After deleting the /br it started working as I expected.

Thanks

Another hint: It is because Hype is using the old web view internally. It scales documents differently when going over 100% the going under.

Update:
Going over 100% is done using the depreciated zoom property and all values between 1-100% the Hype IDE uses regular CSS transform to scale the stage.

You should see the same behavior if you preview your document in Safari and press + - or +
In an ideal world, both the divs which enclose the text and the text itself will shrink down and enlarge in a perfect 1:1 ratio to each other when zooming in / out, but sometimes text will not shrink at the same rate when zooming out, so it will break at different points. Giving your text elements a bit of extra padding will help avoid this issue (making their enclosing divs larger).

1 Like

Thanks both for the useful advice :smiley:

Your welcome. I wrote this little snippet last year. Maybe you want to give it a try or anybody else running into display problems caused when scaling bigger the 100%. The snippet only “activates” in the Hype IDE and does nothing if you leave it in an exported file apart from some data (much less than a KB). But you can also always just remove it from exports…

It works by forcing the Hype IDE to always use CSS transform rather then zoom:
HypeZoomCorrector1_0.zip (17,0 KB)