* David J. Peterson said on 2008-03-21 09:08:39 +0100
> Mark:
> > But as I said, I would rather use css sprites, as e.g. seen
> > here:
> > 
> > http://www.mjnr.us/kamakawi/bisyl.php
> > 
> > Which uses just the one image (scaled up as above).   Source
> > code is  here:
> > 
> > http://www.mjnr.us/kamakawi/bisyl.txt
> > 
> > Your image wasn't quite designed to be chopped up this way,
> > which is why you have the extra borders etc, but it's a good
> > proof of concept and the problem is easily fixable in the
> > image (probably by ditching the grid there in favor of the
> > table border, which is also easier to change later).
> 
> Wow!  That's definitely what I had in mind (minus the border
> problem).  I'll see if I can fix that.  Regarding the image, I was
> having problems creating a grid that was perfectly sized, so I
> just created an HTML table, added all the glyphs by entering
> their value in my font, and taking a screenshot.  Clearly, the
> HTML table didn't end up being exact, though I can't understand
> why...  I told it to make every cell X wide, but it wouldn't do it.
> I'll fiddle with it and see what I can do.

Try to make each cell be *bigger* than each picture, and fill in
each empty cell, with a   or a transparent image. And oh,
don't use IE (well, IE7 or 8 might manage it...) and put the following in the stylesheet:

td { 
    width: Xpx;
    height: Ypx;
    text-align: center;
    vertical-align: middle;
 }

Replace X and Y with the width and height that'll fit the
biggest character, + a little.

If you're going to use a CSS sprite, remove the border (width=0)
before you take the screenshot  :)

Oh, for the final table: each cell that is not empty should
have:
1. a class: <td class="character">, <td class="reduplication">,
<td class="compound"> etc.
2. if it is a sign it should have an id in addition, say: 
 <td class="character" id="huhu">huhu</td>

This way you can change the look easily in css.

You might want to investigate good editors though, to simplify
the drudgery of changing the cells.


t.