Text placement bug?

1

If I want to place a piece of formatted text on the screen, I have a problem with the position. It’s always much lower than the the div element, when placed inside a text or a rectangle.

Simple code like this:

<p style="    text-align:center;font-size:40px;font-family: 'proxima-nova-regular';">
Test</p>

Looks like this:

Screen Shot 2016-10-28 at 12.56.14.png1302×670 15.7 KB

This causes problems with the final positioning when embedded into the site, and changes the pointer location for clicking to change scenes or timelines.
The would be a minor inconvenience, but for some reason the placement varies between mobile and desktop. For desktop it will be wherever you see it in hype, but in mobile it’ll be the utmost top position, so it’s impossible to make it consistent.

Text-Problem.hype.zip (14.2 KB)

2

I’ve had this bug too, I haven’t figured out how to fix the text location accross computers and mobiles as it seems to change, but what you should do is an onClick for the text. Then the text will appear where it is for desktops and at the very top of the box on mobiles.

E.g. if you wanted to change timelines.

<a onclick="myFunction()">Text</button>

    <script>
    function myFunction() {
            hypeDocument.continueTimelineNamed('TimelineName', hypeDocument.kDirectionForward, true);
        
    }
    </script>

Hope this helps you until a seasoned veteran sees this.

1 Like
3

This isn’t a bug; within an absolutely positioned div (which Hype elements are), the initial top margin of a paragraph is equal to 1em, or in your case you get an extra top-margin of 40px. This makes the text much lower, outside of its element bounds. Text boxes will grow to fit their contents, until the width/height has been manually modified.

Depending on your needs, you can either change the size of the box, use a different tag (like a <span>), or modify the p style to have different margins.