Generating small gifs from fonts.

July 3, 2009 7:01 AM

Any tips for generating legible .gifs from Chinese fonts?

This one is hard to explain.

I'm going to over-explain it. If you don't want the background, you can jump down to the last two paragraph and probably still understand the question.

I'm currently creating a kick-ass SRS database in ANKI to help me own the 1,500 (soon to be 3,000) Tradional-style Hanzi characters mapped out in the Heisig/Richardson book "Remembering Traditional Hanzi".

If you don't already know, Heisig's approach is to break down characters into pseudo-radical components he calls "primitives". The user then makes up stories incorporating these primitives and uses them as mnemonics to recall the base character. It's surprisingly effective and the Japanese version of this approach (to remember Kanji) is wildly popular, spawning dozens of databases and a a strong online community.

The Trad Chinese version provides endless headaches that the Japanese version doesn't suffer from, as there are significant variations between Trad fonts. Moreover, there is also significant difference between many "print" styles and their "handwritten" counterparts. Finding a single font to use in ANKI is simply impossible (and if the characters are not displayed to Heisig's preference, it sort of defeats the purpose of his methodic approach).

THUS ...

I've been reduced to generating .gifs of various characters.

This would have been necessary anyway, since many of the "primitives" do not exist as independent characters. So, I'd fire up PhotoShop, find a character that incorporates the primitive, and crop away everything else. I'm fine with that.

The PROBLEM is that I need to reduce these 100x100 pixel transparent .gifs of Chinese characters (and pseudo-characters) down to a size that will fit into a 12 or 14 point text sentence. I've had reasonable luck, but am loosing a bit too much detail, leaving be with somewhat fuzzy images.

Is there anyway (I'm using PhotoShop) that I can somehow compensate? Which format is best? Which mode? Resolution, etc?

posted by RavinDave to computers & internet (9 comments total)

Evidently there will be differences between the print style and the handwritten style. That applies to any system of writing, including Japanese Kanji. I still don't quite understand why you can't use a pre-set font like the default one included with the NJ Star Word Processing prorgram. What do you mean by variations between Traditional Chinese fonts? To the best of my knowledge, the variations would be akin to having serifs or not.

[Native Chinese speaker but I learned only the simplified form of writing]
posted by Phire at 7:29 AM on July 3

Just briefly looking at that ANKI site, it's somehow using HTML, so unless they've rolled their own HTML renderer it seems like a better idea that gifs would be to use vector images. If it's based on Gecko / Firefox or Webkit / Safari you could use SVG images. If it's based on Trident / Internet Explorer then you could use VML images.

SVG images of characters will be available on Wikimedia Commons and could be edited with Inkscape to make them look however you want.
posted by XMLicious at 7:51 AM on July 3

that should be ...a better idea than gifs...
posted by XMLicious at 7:52 AM on July 3

@Phire ...

The differences between Trad styles (and I'll stick to "print" styles for the sake of clarity) might be cosmetic on the surface, but they affect the meaning of the "primitives" (ie: Heisig's pseudo-radicals). Perhaps a pair of dots turns inward in one font, but outward in another. Perhaps some long strokes become detached and shortened in another. Somtimes, a change is rather large (dots becoming full lines, etc.). None are so drastic that a native reader wouldn't be able to compensate, just as English readers can recognize a wide range of R's or G's or whatever.

I have no documentation to back me up, but it appears to me that Taiwan might have (consciously or not) adopted a few minor changes made by the Japanese when they adopted hanzi to form their kanji. This would also explain why you won't really find this problem in Simplified hanzi.
posted by RavinDave at 8:32 AM on July 3

Need some clarification. You say "12 or 14 point": do you mean for screen presentation at 72 dpi or for print at 300+ dpi? It's not going to work well at 72dpi: screen fonts for small sizes like 12 point are heavy hinted / hand drawn, even for simple Roman fonts. No scaling algorithm is going to look good so small. You might get away with it in print, but it's not going to go well.

Anyway, for best results do everything in full RGB/8 mode in Photoshop. You mention GIFs, those are Indexed images with a 1 bit alpha channel. You want full 32 bit images: 24 bits of colour, 8 bits of alpha. PNG is a good native format for saving images, or just leave it in PSD. That means in Photoshop do your work in Grayscale or RGB, 8 bits per channel. (16 bits probably won't help anything).

When you go to rescale your image from your source to the size you need, pay close attention to the "Resample Image" option. Bicubic Sharper is probably your best bet but at that small scale it's not obvious, fiddle around until you get a result that looks good. Resizing black and white line art I often find the smaller image looks lighter. A quick trip through the Levels tool to reset the midpoint usually fixes that, although it's a bit of a hack. I don't know the "correct" way to do it.

The alternate choice, as suggested above, is to use a vector format like SVG or Postscript. If you can find a source of vector images suitable for your purposes (a font, most likely) that'd be perfect. Just render it at your size and hope for the best. Alternately you can in theory take a bitmap from a scanned image, convert it to vectors, then rescale it and re-render into a bitmap. That'd look better but it's a lot of work and artistry to get right.
posted by Nelson at 9:07 AM on July 3

Would you be able to pick one set of font and use that font to learn it? Once you know it in one system, I don't know that it would be a huge leap for your mind to recognize similar Hanzi even if the machine wouldn't have picked up on it otherwise.
posted by Phire at 9:07 AM on July 3

@XMLicious

Never thought of tapping the Wikimedia resources. Nice idea. The vector program has my head spinning. Might take some time to get used to but that might be the simpliest path in the end.

@Nelson

I didn't even think of re-Leveling! I'll try out the other configurations you suggested -- I'm anxious to try out PNG. I'm close to being where I want. I'm just looking to make it look reasonable on the screen. Not printing out anything.

@Phires

Keep in mind, the objective is not simply to remember the hanzi -- but to remember them in terms of the Heisig approach. This is an approach that builds on itself, so you can't really abandon parts of it. It is also dependent on certain elements (let's call them "radicals", even though some are his own invention) looking a certain way. If the radical for human legs (ie: 儿 ) is changed at the font level into two simple strokes (like those at the bottom of the character for "six" 六), then it pretty much screws up the next dozen or so characters which invariably use that radical. Much easier to be able to follow Heisig consistently and deal with the variants later.
posted by RavinDave at 9:29 AM on July 3

I forgot to mention: if you have the entire Adobe suite Inkscape is going to be equivalent to Illustrator. But Inkscape is going to be better at handling the SVG file format and in fact uses it natively. (And be warned that the browsers will not support everything SVG can do though they'll have no trouble with simple font glyphs.)
posted by XMLicious at 10:23 AM on July 3

Dang ... just moving to .PNGs made a helluva difference. I'm still tweaking the other variables. I probably will look into Inkscape -- I've already put a lot of effort into this database. I expect to move on to kanji next (though, thankfully, there is a lot of overlap).

Thanx all!
posted by RavinDave at 11:01 AM on July 3