Hacker News Reader

Comment by T-hawk | Hacker News Reader

Amazing indeed. So what is this font abuse really getting at? It's a means to introduce semantic information into vector graphics. Defining the semantics of a state, its shape and name, allows us to treat the state as an abstraction that can have formatting applied to it.

So how did web fonts end up as the approach? Because that's where browsers first acquired the notion of confluencing semantics and vector graphics. Fonts demand all the advantages of those entities: semantic information to define characters suitable for mapping to glyphs, the ability to apply styling to those glyphs (bold/italic/etc), and raster-independent scalability.

Could SVG do something like this, include semantic hooks in a file for applying styles? (I'm not too familiar with the format.)

View on HN

I'm not sure if I'm missing something in the question, but SVG plays very nicely with CSS. I frequently download SVG map files from Wikipedia, add new, more suitable, IDs to the relevant <path> elements, and then add a CSS section at the top for shading individual countries or regions or whatever.

The complex part is usually simply working out which country/region/whatever corresponds to which <path> in the first place; but this is a complaint more about the quality of the markup of the underlying SVG of an average map on Wikipedia, than about SVG itself.

Great info. The missing part is educating web developers that this is even possible. The thought that SVG can accept CSS styles never occurred to me until this thread and your answer. And I can hardly be the only such ill-informed web developer in the world.

So we do have a good technical solution for what this submission is doing with the web font, as the top post asks. SVG with CSS would be a more proper way of expressing a styleable vectorized map of states. (But the web font is still an exceedingly clever hack, and grabs attention in a way that a boring old SVG tutorial wouldn't.)

Yes. For an example, compare the underlying XML of http://globestroller.com/maps/US_48.svg with the original at http://upload.wikimedia.org/wikipedia/commons/e/e9/Blank_US_...

In the original the states already had IDs (except, for some reason, Virginia), so it was simply a matter of moving the inline styling to a CSS section at the top.

The CSS can also be in a different file, which could be dynamically generated for different users if you wanted to build a simple "make a pretty map of which states you've visisted" app.

Reply on news.ycombinator.com