0 Favourites

Text not lining up properly

  • I'm having a peculiar issue. When I run my project in a browser, things aren't positioned the same way they were in my project. Specifically text. Here's an example of what it looks like in Construct2:

    I've got three text objects here. The paragraph of black text, and two highlights, one blue and one green. I've placed the highlighted words so that they cover up corresponding words in the paragraph (or as closely as possible). The font size, family, and style are all the same, it's just the color that's different. And as you can see, it's pretty close. But once I run it in a browser, I see this:

    One of the highlights seems to be okay, but the other one is completely off. It's as if the position changes once I start running it in browser.

    This isn't a resizing issue because I've turned off fullscreen mode (meaning it stays the same size no matter how I resize the browser). Any idea why this is happening? Is this the intended behavior, or possibly a bug?

    You can download the capx here if you'd like to take a closer look:

  • If I move the highlights a bit up and left they are perfectly positioned to quickly fix your problem.

    I'm not sure what might cause it to not look the same as in the preview(editor).

  • That's true, but the problem is that it isn't the same between them. I end up having to nudge each one a bit at a time until they're all lining up, which is kind of a pain. Why aren't the positions the same in the browser as they are in the editor?

  • Ah, I realized what's going on, though not how to fix it. The multi-line paragraph isn't spaced the same in editor as it is in browser. I added a grid behind it so you can more easily tell. So the highlighted words are in the right place, but since the paragraph isn't spaced as much as it should be, they end up not being in the right locations to cover up the words.

  • Construct 3

    Buy Construct 3

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

    Buy Now Construct 3 users don't see these ads
  • I created a bug for this issue, because I highly doubt it's the intended behavior.

  • Ashley gave a reply to the bug I wrote to any who are interested. Long story short, it won't be fixed because it's a cross-browser issue. The solution is to use a sprite font, which will render the same across all browsers.

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