Non-breaking non-space in HTML

Question

I have a bowling web application that allows pretty detailed frame-by-frame information entry. One thing it allows is tracking which pins were knocked down on each ball. To display this information, I make it look like a rack of pins:

o o o o
 o o o
  o o
   o

Images are used to represent the pins. So, for the back row, I have four img tags, then a br tag. It works great... mostly. The problem is in small browsers, such as IEMobile. In this case, where there are may 10 or 11 columns in a table, and there may be a rack of pins in each column, Internet Explorer will try to shrink the column size to fit on the screen, and I end up with something like this:

o o o
  o
o o o
 o o
  o

or

o o
o o
o o
 o
o o
 o

The structure is:

<tr>
    <td>
        <!-- some whitespace -->
        <div class="..."><img .../><img .../><img .../><img .../><br/>...</div>
        <!-- some whitespace -->
    </td>
</tr>

There is no whitespace inside the inner div. If you look at this page in a regular browser, it should display fine. If you look at it in IEMobile, it does not.

Any hints or suggestions? Maybe some sort of   that doesn't actually add a space?

---

Follow-up/Summary

I have received and tried several good suggestions, including:

• Dynamically generate the whole image on the server. It is a good solution, but doesn't really fit my need (hosted on GAE), and a bit more code than I'd like to write. These images could also be cached after the first generation.
• Use CSS white-space declaration. It is a good standards-based solution, but it fails miserably in the IEMobile view.

What I ended up doing

*hangs head and mumbles something*

Yes, that's right, a transparent GIF at the top of the div, sized to the width I need. End code (simplified) looks like:

<table class="game">
    <tr class="analysis leave">
        <!-- ... -->
        <td> <div class="smallpins"><img class="spacer" src="http://seasrc.th.net/gif/cleardot.gif" /><br/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/pinsmall.gif"/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/></div> </td>
        <!-- ... -->
    </tr>
</table>

And CSS:

div.smallpins {
    background: url(/img/lane.gif) repeat;
    text-align: center;
    padding: 0;
    white-space: nowrap;
}
div.smallpins img {
    width: 1em;
    height: 1em;
}
div.smallpins img.spacer {
    width: 4.5em;
    height: 0px;
}
table.game tr.leave td{
    padding: 0;
    margin: 0;
}
table.game tr.leave .smallpins {
    min-width: 4em;
    white-space: nowrap;
    background: none;
}

P.S.: No, I will not be hotlinking someone else's clear dot in my final solution :)

Solution 1

You could try the css "nowrap" option in the containing div.

{white-space: nowrap;}

Not sure how widely that is supported.

Solution 2

Why not have an image for all possible outcomes for the pins? No Messing with layouts for browsers an image is an image

Generate them on the fly caching the created images for reuse.

Solution 3

I've got around this type of issue in the past by dynamically creating the entire image (with appropriate pin arrangement) as a single image. If you are using ASP.NET, this is pretty easy to do with GDI calls. You just dynamically create the image with pin placement, then serve to the page as a single image. Takes all the alignment issues out of the picture (pun intended).

Solution 4

What would make the most sense is changing out which image is displayed on the fly:

<div id="pin-images">
    <img src="fivepins.jpg" />
    <img src="fourpins.jpg" />
    <img src="threepins.jpg" />
    <img src="twopins.jpg" />
    <img src="onepin.jpg" />
</div>

Solution 5

Since you are using images anyway, why not generate an image representing the whole layout on the fly? You can use something like GD or ImageMagick to do the trick.

View more solutions

Comments

[Matthew Rapati]

Looking at the page, that would be a lot of images.

[bloodphp]

2^10 = 1024 images? It's a lot, but manageable. Bandwidth is perhaps a concern, especially on mobile devices.

[Chris Marasti-Georg]

It would indeed. There are 10! possible combinations, though some are technically kind of impossible. Actually, it would be more than that, because a different image is used if a spare is made vs. missed

[Chris Marasti-Georg]

This is built using GAE, and I am concerned about CPU quota usage... I suppose I could cache each image after generation... Something to think about

[Chris Marasti-Georg]

Would this keep the browser from inserting a linebreak inside one of the divs though?

[JacquesB]

According to Qurksmode, it is supported by all browsersers except IE 5 quirksmode.org/css/whitespace.html

[Chris Marasti-Georg]

That one inserts a square character in the WM 6.1 emulator I'm using

[JacquesB]

Use a table - then you have two problems :-) This approach forces the space between images to be as wide as the images themselves, which is propably not what he wants.

[Chris Marasti-Georg]

yes, they are both set to width:4em, min-width:4em. The images are each set to max-width:1em; to size them.

[Chris Marasti-Georg]

I don't think this would help me keep the column wide enough to display all 4 images... would it? I will try

[Teifion]

Oh, to keep it wide enough, you need to have the parent div have... style="width: Xpx;", that'll force it to be a certain width.

[Chris Marasti-Georg]

It's a nice approach, but does not degrade gracefully if, for instance, a user has CSS turned off.

[Chris Marasti-Georg]

There are actually 3 states possible for each pin - knocked down on the first ball, knocked down on the second ball, and not knocked down. That raises the number of images to be pre-calculated by a good bit.

[Chris Marasti-Georg]

Marking this as accepted, with the caveat that it doesn't work for IEMobile :(

[Sam Watkins]

there's a typo, it should read: {white-space: nowrap} (without the dash)