Animating Type: Hacks when CSS3 doesn’t cut it

After building Cascade in a frenzied hack night, we decided to put it up as an entry for Mozilla Game On. I wanted to learn about and showcase CSS3 animations. There were obviously a lot of 3D matrix transforms going in to the rotating cubes, but there were other subtler CSS3 animations across the website too.

One effect that I wanted to achieve was to render the letter being played as if it were being written by hand. Line by line and exactly the way a human would draw the letters.

abc-bhaukal

I quickly realized that there isn’t going to be a straightforward way to do this. The animation had to be perfect and I wanted the text to be selectable afterwards so Flash and animated GIFs were out of the question. After brainstorming with neena we came up with a couple of solutions.

Progressive SVGs

SVG is just XML, right? So, if we just render the XML progressively we’ll have our animation! Err…NO! Life isn’t that simple, neither are the shapes of fonts. The SVG files of most fonts are pretty complex. They create shapes and subtract/add/intersect other shapes out of it. Get rid of one node in the curve and Latin will start looking like Devanagari. Not exactly what we want.

CSS Masking

How about covering the letter with a DIV, that has multiple DIVs inside it, that have keyframe animations set in CSS that would slowly unmask parts of the character. We’d have to write at least 2-3 ‘unmaskers‘ for each character, not to mention that it would be next to impossible to do characters like X and Q where there is an overlap in lines. This is theoretically doable, but with the vast differences font rendering across browsers and operating systems it could never come out right.

Canvas

Let’s do the animation using arcs and lines in Canvas and once the animation is complete switch it out with a font that looks exactly like the one we drew on Canvas. So, all we need to do is design a font that can be made with simple arcs and lines, make animations for it in Canvas, convert it into a web fonts to be used as @font-face and we are done! This is starting to sound desperate.

 

After failed attempts at achieving the effect, I suddenly realized that we have a typeface designer in the family. A simple solution came to my mind and I called Pooja (Didi) asking for a big favor. Frame-by-frame animation seemed like the correct choice for such animation so I asked Didi to make 24 different fonts each with one frame of the animation.

Screen Shot 2013-08-25 at 8.07.50 AM

She had to go to Delhi that week but was able to slice everything up and send it just in time for the Game On entry! I wrote some JavaScript to run through the fonts frame-by-frame and Bhaukal was born. Bhaukal roughly translated to ‘extreme swagger’ in local Lucknow lingo, that is what I thought any website would have if it has such an animation :P

We chose Raleway to begin with as it was simple, clean and easy to cut. New fonts can easily be added as long as someone is willing to cut all 24 frames of the 26 character by hand. Even though it sounds like a lot of work, the result I think was worth it. You can check out demos or look into the code and contribute more fonts.

Wait a second! Was there an easier way to do this?

Wikimedia Commons: Android App Icon

When I went to Bangalore to pack up my stuff, lut4rp‘s home had been converted into a hacker space with YuviPanda and GeneralMaximus hanging around. I didn’t have too much client work and realized that it was the best time to make a design contribution to open source and familiarize myself with the process.

Yuvi was (and still is) working on the Wikimedia Commons application. He wasn’t completely happy with the icon and I decided to make one according to the iconography design guidelines in the Android design docs. The logo has a pretty complicated shape but I wanted to keep it consistent with the other launcher icons with the slight depth on top and light shadows.

old-to-newicons

After completing the design I sent my first ever pull request (I have no idea why I was scared to do this earlier) which after a couple of changes and iterations finally got merged to the repo. I am not completely happy with the rendering of it, but it looks fine on smaller sizes, guess I’ll change the shading a bit and send another pull request. I am glad that I got past this hurdle and have been sending more (but still trivial) pull requests to other projects as well. Hope this streak keeps going :)

Fresh off the Oven: New APIs for Kivy

#kivy
prtksxna tshirtman: Is this the only way to make the device vibrate? No wrappers yet? https://gist.github.com/tshirtman/4719140
brousch prtksxna: Feel free to contribute a vibration wrapper to plyer https://github.com/kivy/plyer
tshirtman prtksxna: that’s the only programatic way i know, but you could put your device in a microwave to make it vibrate, of course :D
prtksxna tshirtman: lol
prtksxna brousch: I see
tshirtman of course the feedback() call is the important thing here :)
brousch for desktop OSes we could turn up all the fans, spin up the hard drive and CD-ROM to make it vibrate
prtksxna brousch: MacOSX does that automatically from time to time :P
tshirtman brousch: oooh, good idea
tshirtman bonus points if there is an old printer or (glorious!) a floppy disk slot
prtksxna This feels more like kernel panic than the good old vibrate…
brousch Maybe just open and close the CD-ROM tray quickly
prtksxna Hmm, makes me wonder, there should be an API to increase the temperature of the device. That’ll help in games :P
brousch prtksxna: Turn on the GPS and peg the CPU?

Python Hangs in Mid-Air

#kivy
prtksxna is bothered by the lack of ‘end’ or ‘}’ in Python. Code just hangs in mid-air :\
geojeff :)
tshirtman prtksxna: haha, you’ll get used to it :)
tshirtman it’s magical, code just hangs in mid-air :D
geojeff yeah, that’s a good one
geojeff and the inverse is something like, this javascript code is “all clamped to the ground”
prtksxna tshirtman: hehe
tshirtman geojeff: ^^

Font Anti Aliasing & CSS

After publishing the Customizing iTerm2 post I was really bothered by the way the font was looking in the code block. Some people are more comfortable with anti-aliased fonts all the time, I personally can’t write or read code like that. I like looking at Monaco in 10pt without any anti-aliasing, just plain old pixels, so this was obviously bothering me.

antialiased

I did some poking around, asked Google, asked my sister but there seems to be no solution for it. Nothing that’ll work properly on every browser (why isn’t that surprising). There was something called font-smooth  in the CSS3 specification in 2002 but they later removed it from the standard. MDN has a page on it only stating that they don’t implement it. There is however a purely webkit alternative called - webkit-font-smoothing that lets you do almost the same thing. I found a pretty extensive blog post about it which came with a demo page. I found some hacks to get fake anti-aliasing that were pretty interesting, but nothing to get rid of it.

For now I’ll be happy with the following CSS and hope that font-smooth finds its way back to the CSS specification.