Text is always overflowed

Hi group,

This problem has haunting for like a year.
The text is not displayed correctly either previewed locally or hosted on mobile. See the screenshots below. I have to manually added space, which is hard to measure and weird…

mobile screenshot:

Desktop app screenshot:

Are use using a non-standard font?

I set up open sans fonts in my prototype. See the screenshot.

Plus, there’s another problem… OpenSans-LightItalic font is rendered as a serif font. :cry:

Hi Tintin!

Can you attach your RP file as well?

In your screenshot, it looks as if you’re using a single large paragraph widget with lots of text manually spaced out. is that correct? The spacing between characters can vary as you compare the way it renders in the browser and how it looks in RP; these minor differences can become more noticeable as you add more text to a single widget. As a test, try separating each block of test onto its own widget. Does that help?

As for Open Sans Light Italic rendering as a serif font, it sounds as if there’s something up with a font mapping either in the Font Mappings tab or in the source font. And are you pointing to fonts that are placed in your local HTML folder? And has Light Italic been added in the same manner as the other weights? Please do elaborate on your font setup and include screenshots along with attaching your RP file. Hope that helps!

Hi Alex,

Thanks for your reply. The preview rendering in browser is totally OK. The issue only happens when I host it online and then view on my mobile device. I tried to fix it…

At the very beginning I used separate text widget for each paragraph, but it turned out (only happened on hosted mobile device) that each paragraph was overflowed. I tried to manually leave large space between each text widget, but it was hard to control the proper spacing. So, I began to use only one text widget to contain all the paragraphs. Then I manually increase the spacing between the text widget and the widget below. But no matter how much space I manually put between, there seemed to be a threshold that cannot cross… which means, there’s always an overflow. Although in doing so the problem is not completed solved, since there’s only one text widget, there’s only one overflow, better than many overflows. :sweat:

As for Open Sans Light Italic rendering as a serif font, still, it happens on mobile device. The preview rendering in desktop was OK, until I hosted my prototype and checked it on mobile browser…

Can I send my source file and hosted link to you privately? I’ve met problems of the same kind several times, just couldn’t fix it.

I see. Yep, can you shoot us an email at support@axure.com? In your email, please attach the RP file, the font files for the various Open Sans weights, the URL for your corresponding Axure Share prototype, and a link to this forum thread for our reference. Can you also confirm where you obtained the fonts? Google Fonts? Thank you!

Hi Alex,
I’ve sent the email. :slight_smile:

For those following along at home, Tintin wrote in to the help desk and we looked over their file. It looks like in this case, the long paragraph widget didn’t have line spacing defined, which caused some variable line spacing between browsers (results were different on Android and iOS). Defining that line spacing seems to have done the trick in stabilizing the appearance of the widget text between browsers.

Hopefully that helps anyone else experiencing similar issues!