Hype 4 Pro layout issues

1

Hi All!

It’s been awhile since I was on the forums. Old job did not allow Hype at work and now that I am COVID-Furloughed. I have time to get back to the software I love :slight_smile:

I chose Hype to layout the newsletter website for our local historical society, and it has been a challenge from a “what you see is not what you get” process.

In older versions of Hype I would layout a mobile layout, a tablet layout and a desktop layout.
I find that this has worked better than the flexible layout feature.

I could drag out my text blocks and my element blocks and preview on a device in React and everything looked just like it did when editing.

With this instance I can layout copy over an element block and in preview it will disregard the flow of the copy making it overlap or disregard any padding or margins. All in iOS devices.

So the work around is to make padding and margins much bigger than they will be on iOS. (see below)

Not sure why this is the case

Also staggering images remain on screen when you drag them on the stage. Sometimes you have to save quit and restart Hype to clear that up.

And moving images in the layout can also create a screen where all unselected images turn grey.

I am using Catalina :frowning: Not sure if that is an issue.
But this was my go to program for things like newsletters because it was so easy to roll something out. But this time it has been painful.

One last observation…on Windows Edge I do not have to adjust the margins and padding. What you see in Hype on the Mac is what you get on a Microsoft Surface tablet. That’s just plain anti Mac :wink:

Thoughts?

editorIssues
editorIssues1889×1792 1.37 MB

2

try absolute lineheight settings …

3

Are you referring to editing the CSS per text box on the text line height?
example…

body {
font-size: 1em;
line-height: absolute;
}

I can add my own CSS I suppose…I was hoping that I could use Hype’s visual tools to do this without going in and creating a new style sheet.

4

The issue might be that the line-height setting (which is by default ‘normal’) is interpreted differently by different browsers. If you adjust the line-height option in the text inspector, the pixel value will be set absolutely. No need for css:

Screen Shot 2020-04-23 at 4.00.57 PM

1 Like
5

For the issue with the text becoming different lengths, you could add (in the inner HTML of the rectangle / text element) a pure-code box. Something like:

<div style="width:100%;height:100%;border: 3px solid rgb(221, 221, 221);">text here</div>

This might be preferable to setting the border on the enclosing element which may have a different height than the height of the text inside of it.

6

Thanks,
I have set it to absolute values in the UI line height box. So far it is not changing the line height. The number changes but no perceivable change in the visual.

I think I will do a version of the last post and edit the CSS for the box.
It’s a shame though. This was a real bonus to Hype being able to do just about everything from the UI.

The odd thing is if you view the stage/page in Hype at 75% and then blow up to 100% you will get different visual readings as well.

Very erratic behavior.

7

It could be that there is Inner HTML with its own line height settings overriding the top-level element setting.

For that matter, would you mind sending/attaching a document that just has this element? I'd like to take a look. I don't recall line height being so different on iOS vs. Mac before and am planning to investigate if this is a regression, related to specific font choices, or something that's been there all along and not noticed as much as recently :slight_smile:.

This rendering difference may be unrelated (how we do the zoom can unfortunately introduce different metrics - I consider this a bug), but I'd like to look at this as well to verify.

8

Thanks!
Hype crashed on me after my last post so I attached the open Hype file with the crash report.
I will message it to you separately as well.

1 Like