This is a weird one. I have a game I posted out (currently unlisted because it's still in development). For the map, I have sixteen jpg images that I run, left to right, across the top of the screen.

They look fine to me in firefox and chrome.

However, a friend of mine also looked at it in firefox and chrome (same browsers that I did) and he only gets fifteen jpg images, with the last one wrapping around (and distorting the panel layout).

It seems that HTML works correctly - you can shrink your panel and squiffy will shrink the image to match. So why would different computers show my jpgs differently? I'd like to know what might cause this before I start shrinking my jpgs to fit.

Hello.

If you message me a link to the game, I'll see if I can help.

(It can probably be fixed with a bit of CSS.)

Here you go. It's at the link below:

https://textadventures.co.uk/games/view/7puxth7faucpp77brz-r5g/solar-trader-2

If you click on "Just go flying" you should see a control panel. At the top will be three rows of boxes, the top ones squares, the other two rectangles. There should be 16 in each. My friend is seeing only 15 and a very frustrating wrap.

Let me know. And thanks in advance.

Interestingly, I saw the same thing on my wife's computer -15 squares - just checked. So it seems I'm privileged.

I'll wait for your response, but I was thinking of reducing the square's width/height by 1 (from 40 to 39). That will gain 16 pixels. But have a look.

The problem has to do with the size of the space between your images. For computers without the Georgia font it defaults to the system serif. Which is can be larger than Georgia font (Tested this by removing the Georgia font, and replacing with Courier New -- a mono spaced font that is larger than other font paces)

Solution to pixel perfection is to not put a space between the images. I can't see the markup exactly, but the browser is interpreting the empty tabs/spaces etc into one single space. To remove this effect you can declare your images as blocks and float them, give them a satisfying margin so they display properly spaced.

Or you can use flex to distance them correctly.

Either way you are going to have to write some css in order to fix the placement. Or to declare a font and make sure it's loaded on the server so that it is available to every user instead of relying on defaults as that is the fundamental problem.

Thanks, AJ. I think I'll just shrink the font size and see how it works. Early testing shows it fixes the problem.

Hello.

I didn't get a chance to pop in yesterday, but I'm kinda glad because I just learned three things from AJ's post.

The best alternative would be not putting spaces where you don't want spaces to appear. It's not reliable to use text spaces for positioning. If you want space between images, you can use their margin properties to do that; which then isn't dependant on the player having a font whose spaces are the same width as yours.

If the spaces are there to make your code easier to read, and you don't want them to appear in the final layout, you could give the images display: block; float: left; (setting margin-left to a number of pixels or percent if you want a small space).

If you don't want to fiddle around with different fonts and their metrics, one fallback would be explicitly setting font-size: 0px.

Another alternative (if the spaces are there to make your code easier to read) might be running something like: jQuery('#someElement').contents().filter(function() {return this.nodeType==3 && !$(this).text().match(/\S/)}).remove(); - which will remove any spaces between the child elements of #someElement.