> 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.