Isometric text with CSS3 | Hacker News Reader

Isometric text with CSS3

midwinter-dg.com

56 pointsKenan15 comments

It's really unfortunate that this would be so hard to use in production due to lack of a suitable IE fallback. If a browser doesn't support @font-face, for example, you can always fall back to a standard font. For isometric text though, lack of support would likely disrupt the page layout so badly that the only fallback solution would be images.

That said, as easy as it is to think of sites where isometric text would be a cool design element, I can't easily think of an application where it would need to be actual, editable text. Perhaps if you had a heavily futuristic themed CMS site...

Editing isometric game worlds, perhaps?

This site fails to use unprefixed css properties when it uses the prefixed versions, so when newer browsers view the page they get a partial experience.

Nice! This can be used to make a really cool isometric website. Something similar but in terms of isometric blocks: http://kushagragour.in/lab/isoblocks/

Interesting firefox will do the isometric text, but not when its the shadow

This site uses the never-official-and-now-removed skew(x, y) rather than the correct way, skewX(x) skewY(y).

This is correct. More on MDN: https://developer.mozilla.org/en/CSS/transform#skewX

Looking forward to digging through the source code on this one. Pleasantly surprised that text selection with both mouse and keyboard worked intuitively and smoothly (Ubuntu/Chrome) -- usually I'd expect this kind of trickery to break down at some boring edge case like this. Same for zooming with Ctrl+mousewheel.

I think if there was too much of this anywhere my neck would get a major kink in it. The specific font choice didn't help.

It's cool that this is _possible_ however, just not so cool for accessibility, or readability.

I'd say it may even be contributing to accessibility, precisely because of the use of CSS to achieve a desired look instead of falling back to imagery. This allows to disable styles or rather allows screenreaders to still work their way through every bit of information.

But yes, for visual readability its quite the horror. So better apply it sparingly.

Is this related to this project? http://www.themaninblue.com/experiment/Cubescape/new.php Design looks the same.

I don't see the similarity, aside from the 3D perspective which is the point of the demo.

Fails in IE9

Half-fails in Firefox 14.0.1 (Win7)

Surprisingly works in Opera.

Reply on news.ycombinator.com