Text offset on Mobile Browser

0 favourites
  • 7 posts
From the Asset Store
This is a single chapter from the Construct Starter Kit Collection and the Student Workbook from the Workshop.
  • I noticed that text in text objects has a slight offset downwards on mobile in the browser. See pictures:

    This how it looks in Construct (running in Chrome)

    The same text object, but played on mobile, in the Chrome browser

    Is there anything I can do about that? Just moving the text upwards won't do it, because I need the game to work in the Browser anywhere. PC and Mobile.

  • I checked again and noticed that the problem also occurs on the PC Browser. A hotfix would be to move all the text objects, but its a bit annoying that the web build does look different then what I put together in the editor.

  • Which browsers are you using specifically?

    Over the last few releases we identified a problem where Chrome and Safari have different ideas of where text baselines go, which makes it pretty much impossible to exactly vertically center text across browsers. I'm not sure if the browser issue will be fixed any time soon, so you might want to work around it by just using "top" alignment and positioning the text with that.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Thank you for your reply! I encountered the problem on Chrome and Firefox.

    Interestingly, the text is centered on the Duck Duck Go Browser.

  • I tried to follow your advice and it works in most cases, but not in the one case were I change the text dynamically. Sometimes, the text has 2 lines, sometimes 1. And when I align the top in a way it looks centered with 2 lines, it looks off with just one line of text.

  • This is because Firefox and Safari (and some other browsers) display CSS in another way. This can be fixed by putting text-rendering:optimizeLegibility; in front of the CSS script.

    When you export the game to another plattform, the chrome method will be used.

  • In Construct text is rendered via a canvas, not HTML and not using CSS, so changing any CSS properties will not have any effect. As I mentioned I think this comes down to browser differences between where Chrome and Safari measure text and is difficult to work around.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)