Pure CSS: The "Back to the Future" logo | Hacker News Reader

Pure CSS: The "Back to the Future" logo

code.garron.us

For clarity's sake I would probably refrain from calling it "pure" as long as the -webkit- is necessary.

The page cheats a bit: the font contains "TO THE" as a single char "&" instead of composing the words from 5 letters.

Although that's cheating, you can achieve the same effect by creating the glyph and replacing any letter that's only used once (O, H or E in this case) with it. The other characters in the font can be blank. Therefore it works both for those that interpret it visually, and those that interpret the text.

I've seen this suggested for replacing a brand name with a logotype.

Is that why it requires js, and looks like "Back < & Future" if js is disabled?

NoScript doesn't just block JavaScript. See http://hackademix.net/2010/03/24/why-noscript-blocks-web-fon...

The font is specified in the CSS with @font-face, a CSS2 feature. Perhaps the browser you're using might implement this feature using JS.

There is no JS whatsoever on the page. And it still looks correct in Safari when JS is disabled.

Holy shit, I know this kid. Lucas is also the #11 speed cuber in the world. Very cool guy over all.

So the point of this logo, if anyone is curious, is that Stanford regularly holds an annual social dance (meaning waltz, swing, cha-cha, etc. but with no particular concern for traditional form) called "Big Dance." Lucas really wanted the theme to be "Big Dance to the Future," but sadly, "Pride and PrejuDance" won instead.

I also know Lucas, and at a recent event watched him restore a cube blindfolded - most impressive.

Why were fonts originally not embedded in websites? Licensing, security, support?

Licensing. When you use a font in a PDF, the receiver of the PDF doesn't easily get the ability to re-use the font. When you embed it in a website, you're giving everyone on the Internet a workable copy of the font. Fonts are expensive.

Depends on what you mean by originally, really. Originally all this was intended for sharing scientific research and no one cared about crap like fonts, or almost anything else we take for granted now; it kinda used to look like this: http://www.w3.org/History/19921103-hypertext/hypertext/WWW/T...

Well, it's more interesting then the Acid test. But the fact it only runs 100% in Safari raise some "hack" flags.

It doesn't hack per see, but uses css features (gradients) which isn't standarized yet, and therefore uses vendor-prefixes in the css.

It should be somewhat simple to add the Firefox versions of the css directives to add support for Firefox.

Strange, it does not render properly on Safari/iPad

Looks great in Chrome 5.0.342.9 beta. Not so much in FF 3.6.3. (Both on Ubuntu 9.04)

Reply on news.ycombinator.com