Anyone who has built Flash websites and cares about the details of pixel perfection will have had to jump through hoops just to get something to look just so. On a recent project the hoop was getting a monospaced typeface to look sharp and legible, line up like a monospaced typeface should and do this on dark and light backgrounds with animation.

The first problem, sharp and legible, can nowadays (Flash 8+) be done by just selecting “Antialias for readability” on the antialising combobox. Mmm, nice a crisp now. However, that introduces a number of problems:

1) Bold and regular weights can look very similar

2) Strokes in the typeface are snapped to as many whole pixels as possible which may introduce weird kerning and will throw out the fixed spacing of a monotype typeface. This means that if you have multiple lines all the characters will go slightly out of alignment the longer the lines.

3) The dynamic range of the typeface color is severely reduced. You won’t be able to tell the difference between type with a color value of #fff and #ddd - it will be white either way

4) The weight of the font will look different on different backgrounds i.e. if you start on one background and change / animate it to another (ARGH!)

So what to do?

Well 1) can be tweaked around in the custom anti-aliasing settings. 3) is not so bad, and in this project the type is only grey, white and black - we didn’t need the full dynamic range so we got lucky there. 4) can be handled, by initially (before anyone sees it) setting the text color to a mid gray, say #888, and then by using script to change it to white and black when needed. It seems the Flash text rendering engine compromises on the anti-aliasing and it looks ok. Also we opted to minimise any fading and instead to go for a “typewriter” style animation effect.

2) Is the real problem. The only “solution” is to create textfields for each single character (including spaces) and positioning them on exact points. The main drawback is that doing this almost completely wipes out the possibility of HTML textfields (which we needed as the site was content managed) unless you want to right your own HTML textfield implementation (cost / benefit time!). In our case we left it unaligned - the soft “Antialias for animation” just wasn’t good enough and we didn’t think many people would notice it wasn’t aligned (except for the odd designer) - we may still go back to the soft type yet or we may still have a go at implementing the “textfield per character” solution (we only tested it so far).

Here we go:

1. The wp-typogrify setting that adds extra   s breaks nextgen gallery when you have more than one gallery on a page

Solution: It’s not a big deal so I disabled the wp-typogrify setting. Otherwise it would be hackery into the wp-typogrify module.

2. Getting pixel pattern transparent gifs to line up!

Solution: Gah! Had to create slightly different images that are offset by a pixel, and, well it doesn’t always work the same across all browsers. Good grief to think that I was thinking of a more crazy theme with more complex patterns instead of the chosen differing “transparencies”. Come to think of it I may end up trying to implement that… also I had to use tables for certain parts of the design - yeah, yeah, if table-cell was better supported I would be doing it that way.

3. The pager doesn’t work properly if you shift the main blog posts to something else like /blog/

Solution: It’s a bug! Patch can be found here. Hopefully this will fixed in Wordpress 2.8.

4. WP Super Cache didn’t work out of the box

Solution: Had to step through the FAQ suggestions. I would say it was to do with permissions on the wp-content directory at time of installing the plugin.

5. Hacked modules stopped working when upgraded.

Solution: Well duh - how embarrassing! Don’t hack the modules themselves. Just work around it in the theme. Move along - nothing to see here!

6. Getting background images that work

Solution: I originally thought that most backgrounds would work with the faux transparency, however, backgrounds that are very bright, very dark or have dithering of their own look rubbish. So I just had to put an hour into selecting background images instead of 5 minutes.

7. Need at least 5 posts to make front page look ok.

Solution: Get busy, don’t tell anyone about website until more than 5 posts!

8. Getting the latest image thumbs to perfectly align left and right in three columns

Solution: Wrap the output from nextgen in a table. Again, if only table-cell was better supported. *sigh*

9. No spacing in Twittter Tools output

Solution: Well you can either hack or regex. In this case a hack was more suitable.

9. Tags and long headings went over the edge of the design

Solutions: Oops. Thankfully that heading really was too long and the tags mostly useless. Style : 1, F orm : 0