Type doesn't display correctly

(jeff leyshon) #1

I am having huge problems with type not displaying correctly in Hype.
At first I was convinced I had done something wrong, something I had overlooked.
However now I’m not so sure.

The first example is, I have created two columns of text in two separate text boxes (not Buttons or Symbols, just simple Text boxes). On the desktop layout of my site on a desktop browser everything looks wonderful as one would expect. But on an iPad and iPhone they do not line up, they appear to have different line heights (they do not however). The font size and line height are identical (12pt,14pt, Helvetica)

Whenever I place a text box near a Button the same happens.
I need to create buttons that change colour and link to scenes and urls, as one does often. These buttons are placed within the grid that simple text boxes live too. I expect to be able to do this without problems, considering I don’t code and that is why I’m using Hype.

I have posted this problem before and had some great help and suggestions, none of which solved this issue unfortunately.

Is this a known bug, or is this just the way Hype works, or doesn’t.

I am at the end of this project and find this frustrating as Hype seems to have created a problem that needn’t exist.

Thanks in advance for anyone who could shed light on this issue.

(Jonathan Deutsch) #2

Unfortunately text metrics can be pretty different in different browsers and devices. Would you mind sending a simple example that illustrates the specific problem? If we can take a look we might be able to provide specific suggestions.

(jeff leyshon) #3

Thank you for your response.
I would love to give you a simple example however it’s a complex situation.

I have uploaded the site for testing at http://jeffleyshon.com/Kirsty/
I have also uploaded the Hype project to dropbox - https://www.dropbox.com/s/wploq99mhf8rj5i/kirsty%20website%20edited.zip?dl=0

If you navigate on an iPad or iPhone to the CONTACT section you will see that the left column text starting ‘For further…’ has a larger line height that then bunches up with the telephone number below. The same for the paragraph below and again below that. This only happens on my iPad Air 2 and iPhone 6. On the desktop it’s fine. On the right hand column everything works well despite the close proximity of buttons and text boxes etc.

If you now navigate to CLASSES and MON. I have a mixture of Symbols, text boxes and buttons on the left column. Again fine on Mac OS, it works well on the iPad in the Portrait layout but then bunches its in the Landscape layout.

If you navigate now to WED, the left and right columns are perfectly in grid on the desktop browser but do not align in the iOS browsers. And importantly these are all just simple text boxes standing alone, nothing in close proximity.

I have included many examples to illustrate the different parameters causing the same problem. So finally if you navigate to CLIENTS with an iPad (or iPhone) in portrait. The columns do line up perfectly. They did not until I opened up the innerHTML and erased all the styling but keeping the type and reapplying styles etc using the palettes. I have tried to replicate this elsewhere with no further success.

There are other examples of the problem in PILATES for example.

So to conclude, it’s all very random; somethings work, something don’t.

I would appreciate some feedback, solutions