Simple Graphics are clipping Text

1

Not sure what is happening here. If you look at this page, https://donjohnsmusic.com/When_Words_Arent_Enough_1.html

You can click on the instruments to learn a bit about them. On all my desktop browsers, all is fine, but on my old iPad the text is out of the gray box that I put the text in. When I tried to make the text fit, I have way too much space on everything else.

So my question is more not how to fix this, but are there any guides to know that your graphics are correct across multiple platforms. Would it make more sense to create this text bubbles in photoshop and insert them as graphics? I was trying to save loading times by creating these in Hype, maybe that is false assumption?

It’s not that big of deal, but for those who are seeing this on Mobile devices, it is not what I wanted.

Any suggestions on to create this with consistency.

Thanks again, you guys are great in here!

2

this is not responsive at all, so adding some reponsive settings when dealing with mobile devices might not be to bad :wink: regarding the textboxes the easiest approach seems to be to add some scrolling on overflow …

1 Like
3

While different browsers have historically rendered text with small differences (that can lead to more lines etc.), this case is pretty surprising because usually Apple WebKit-based views are rendered very similarly. There typically isn’t this big of a difference between Hype/Safari and iOS.

Examining an image of the rendered text on Mac vs. the rendered text on iOS reveals that it is not a matter of the text itself but the line height.

As a workaround, you can manually change the Line Height in the Typography Inspector from “normal” to a specified value, and then the rendering will be the same. I chose 18 for the instrument descriptions and that worked well.

1 Like