

Stately - A US state map in a font - petewarden
http://intridea.github.com/stately/

======
zaius
I like the idea of styling a map properly with CSS. I love the sheer WTF
factor.

The fact we're seeing fonts (ab)used in this manner (and for icon fonts) says
that we're sorely missing a good technical solution.

~~~
T-hawk
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.)

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

~~~
T-hawk
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.)

~~~
salvadors
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_...](http://upload.wikimedia.org/wikipedia/commons/e/e9/Blank_US_Map_48states.svg)

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.

------
shinynewmac
You'll all regret adding -ly to anything eventually. Still really awesome,
can't wait to see the rest of the world.

~~~
dangrossman
Does Flickr regret dropping a vowel in its name? There have been lots of
naming trends and they don't seem to have had much effect on long-term
success. What's wrong with -ly?

~~~
shinynewmac
It's not a bad thing at all. Flickr works because it is still pronounced
Flicker. Personally anything with -ly irks me the wrong way and it feels like
a branding cop-out at times. Just imagine if Google was called Searchly or if
Basecamp was named Managely. From a branding perspective in 5-10 years time
adding -ly will look dated. You'll think back to web 2.0 as if you were
looking at a geocities page (or worse Homestead). Not to say this project
should be aware of its branding at all.

I have to say Improvely looks solid by the way.

------
shmerl
Hm, why can't this be done with simply using SVG instead of using fonts in
such manner?

~~~
atestu
It can, but not every browser supports SVG sadly. :( This however, works in
IE8

~~~
shmerl
I see. But I think it's not a preferable solution if one wants to support
crippled browsers like IE <= 8. But it's an interesting proof of concept
still. Some approach like Raphaël JS is probably better for such cases. Or one
just needs to ignore any crippled browsers, which might not be ideal.

------
paddy_m
What about old fashioned <https://developer.mozilla.org/en-
US/docs/HTML/Element/map> and area tag? They are built specifically for this.

~~~
bluetidepro
That can be a huge mess, though, if you need to do a lot of dynamic color
changing of specific states and/or groups of states.

------
ldayley
Stateface is another good font if you'd simply like images of the individual
states. <https://github.com/propublica/stateface>

It doesn't display the entire map like this (so the use case is different),
but it's pretty cool all the same.

------
travisp
I love the idea, but they've made an odd choice in the way they've styled the
page: I can't scroll down to read all the text. Page scrolling is jerky and
the text disappears for me before I reach the bottom of the text. I had to
inspect the page source to finish reading "How does it work?"

~~~
tnorthcutt
What browser/OS? Working fine on Chrome stable/Mac 10.8

~~~
travisp
I was also using chrome stable, Mac OS 10.8. The left column doesn't disappear
when I scroll down in Firefox (although also much more jumpy than I'm used
to). But, I guess it seems to only affect me. I do have a retina display and
they are using javascript to serve me retina images, which might have
something to do with it.

------
sheraz
Wow. very cool. But that 3d-rotation on the hero graphic gives me a little
vertigo -- it's almost too good :-)

------
Camillo
This is great, but I'm really looking forward to support for animated fonts in
Firefox.

~~~
wickeand000
The return of the blink tag?

------
Mizza
Looks like Washington and Maine get cut off at the top!

