Playing some catch-up on the web, hitting gotchas on the bleeding edge

Ever since I got a first set of static web space on GeoPages back in '97, I've been playing around with designs, on and off. So I went through the phases of frame-sets, and then table based layouts and Java applets, before getting to the bleeding edge ten years ago and doing the whole semantic XHTML1.1, CSS, minimal JavaScript thing, applets in <object> tags, while still having to provide graceful degradation to Netscape 4 and passing conditional CSS with JavaScript fixups to IE6. (The current blog layout is really a spin-off from the sort of design I was playing around with at about the time I started blogging).

Then there was jQuery, and I did a little bit with that, like accordions to cut the space occupied by what had been growing heavily styled nested lists full of links. Oh, and scripting for the rounded corners too. And then <canvas> in some browsers, while having to feed SVG or VML to the rest either explicitly or through a wrapper library.

But that was all a while ago, and I felt it was time to start playing with the new things we can do that had been passing me by -- HTML5/CSS3, more semantic mark up, webfonts rather than image-substitution, with symbol fonts for icons, CSS3 effects (so we can do script free accordions like we used to do script-free drop-downs) -- and see what we can get away with these days, which changing the rather stale aesthetic of textured backgrounds and hard delineations.

So, getting to the point, I hit a CSS3 gotcha when trying to push the envelope. What I was after was to style a navigation list with a symbol font right-arrow in a circle at the start. So I tried this:

And I was disappointed to see Firefox render a little circle, then a placeholder glyph from the text font in use, then the list content -- whereas IE9 did exactly what I wanted, and Opera 11.6 drew a square around the arrow rather than a circle, even though all three browsers draw an arrow in a circle if I put the appropriate HTML escape in a span and style that. After some experimentation, it seems that Firefox will not put the glyph in the border, nor use the symbol font, for symbols in the private use area unicode range. And Opera 11.6 will use a square outline regardless.

So I can have a pure CSS solution with not quite the glyph I want, and in some browsers, not the outline; or I put the symbol I want in explicitly or by script. Or maybe some combination.

Still have to try it in a Webkit browser, mind you.

Later: experiments with other code points (abandoning the symbol font) shows that letter forms do get circled by this technique in Firefox, but symbol ranges e.g. Mathematical Arrows don't.

Even later: Chrome, as a representative webkit, doesn't show any glyph at all -- just the border! Looks like I might have to do this by script.

Even later yet: I ended up doing it with an image.