Category: Technophilia Professional

Sans-serif fonts and Japanese text, redux: It’s Webkit’s fault

I don’t use iTunes, and the last time I bought anything from the iTunes store was some time in 2008. The recent shutdown of, however, resulted in a $40 credit at the iTunes store, so I decided to update the software and shop around.

While I was updating iTunes, I figured I may as well install Safari for Windows, just to take a cursory look at my websites.

So all those problems with Japanese text and sans-serif fonts I’ve been laying down at Google Chrome’s feet? Well, it’s not Chrome’s fault entirely — it’s Webkit’s fault.

Chrome runs on the Webkit engine, which also powers Safari. Viewing this site in Safari produces the same result — no font substitution when a sans-serif Japanese font is required. A visit to on Safari confirms it — the site looks borked on Safari as well.

Just to be thorough, I checked Opera as well. It can handle sans-serif Japanese font substitution fine, although it looks a bit ugly.

UPDATE, 02/27/2011, 08:13: Well, I finally joined the 21st Century and upgraded from Windows XP to Windows 7. Aside from all the User Access Control prompts and annoyances with running programs as an administrator, I have to say I rather like some of the subtle touches of Windows 7, but that’s not the point of this update.

Windows 7 and Webkit are rendering Japanese text styled with a sans-serif font. Rather, it falls back on a default font (even if it’s a serif font) than showing nothing at all. This issue hasn’t been fixed in Windows XP, which is inconvenient for anyone holding out on upgrading.

Google Chrome won’t render Japanese text with a sans-serif CSS

Here’s some text in Japanese: このセンテンスは日本語で書いた。

Nothing strange so far, right?

Here’s the same sentence in a <span/> tag with a style attribute specifying Helvetica, Verdana and Arial fonts: このセンテンスは日本語で書いた。

If you’re using Google Chrome, you may not even see the sentence at all. It will, however, render when you view the source code.

Curious to know why some parts of my sites render Japanese text and others do not, I started inspecting elements with Japanese text in Chrome, enabling and disabling rules. When I disabled font-family rules specifying sans-serif fonts, the Japanese text re-appeared. Enabling the sans-serif rule made them disappear again.

Continue reading »

Google Chrome can’t handle this site, or why you gotta be difficult all your life?

Back when social media sites were cropping up left and right, I had a test to determine whether it could handle my more esoteric interests: Does it support Japanese characters?

I signed up with Twitter a good six months before it took off at SXSW in 2007, and one of the first things I did was tweet in Japanese. Success! I signed up with Grooveshark around the same time and tried to share some upload some music tagged in Japanese. I saw question marks where there should have been text. Failure.

Google Chrome is gaining market share, and even I have to admit I like its speed. But one thing prevents me from adopting it — it can’t handle the Japanese characters on my site.

That’s not to say it can’t handle Japanese — I can visit HMV with no problems, but Bounce looks totally messed up.

Continue reading »

How does a programmer get to Carnegie Hall?

I don’t usually leave comments on blogs I don’t frequent — and honestly, I don’t really comment on blogs I do frequent — but back in late February 2010, someone on DZone posted a link to a blog entry from 2008 answering another blog entry regarding the role of passion in programming.

A semantic argument ensued, which usually happens when definitions of adjectives are up for debate, but in this case, both authors are correct. Passion, professionalism — they’re not mutually exclusive in the realm of programming. But both writers managed to talk around the one point on which they agreed.

The Carnegie Hall web site makes a coy reference to that age-old joke, "How do you get to Carnegie Hall?" The reply: practice.

If you want to improve a skill — be it C# or C-Sharp — you need to practice. To become a master at that particular skill, you need to practice for 10,000 hours.

Malcolm Gladwell seems to get all the press regarding this figure, but Daniel J. Levitan mentioned it first in his book, This Is Your Brain on Music. Levitan says it’s a well-researched figure, and I haven’t scoured the footnotes of the book to verify. Intuitively, it makes sense.

Continue reading »

If by "rock star", you mean "can’t read music"

I always have to snicker whenever I see a job posting asking for "rock star developers". What does that mean? I picture someone who draws attention to themselves by the sheer force of their software engineering acumen, coupled with an over-sized ego and an even bigger dope addiction.

"Rock star developer" used to mean one thing but now is meaning something else. I sometimes look at those job postings and wonder if these employers would prefer a "classical developer" instead.

I am a classically-trained musician, although you wouldn’t know it if you heard me try to bang through the Tocatta by Aram Khachaturian. When I was learning the first movement of Ludwig Van Beethoven’s Moonlight Sonata, I wasn’t concentrating on the individual notes so much as I was listening for the overall harmonic rhythm. I could sense when one diminished seventh would fake out a resolution to another diminished seventh, till it finally reached the tonic, which was not necessarily in the root key established at the start of the piece.

Continue reading »

I used to code in my free time

The moment I read "I Don’t Code in My Free Time" by Ted Dziuba, I could already picture the rebuttals popping up on DZone. I was not disappointed. (I’m sure more will pop up as the days pass.)

I could see where Dzuiba is coming from, although I wouldn’t word it as strongly. I’ve seen a lot of posts pop up on DZone extolling the virtues of being a "passionate programmer", someone who always strives to learn, devotes free time to improving, living and breathing code … all the usual self-back-patting by overachievers.

I used to code in my free time. But that’s because I was learning from scratch. I spent my college years learning such esoteric topics as orchestration, music theory, Associated Press style, defamation of character, points and picas. Control structures, variable types and design patterns were not part of that curriculum.

Continue reading »

The Great Code Migration of 2009, Part the Second

I’ve been wanting to redesign my sites for a long time, but the idea of tinkering with CSS does not appeal to me. I’m competent enough with front-end code, but the whole cross-browser compatibility thing is such a headache. I already have enough to do debugging server-side code. By the time I get around to working on the client-side, I want as little resistance as possible.

Given my whole move to frameworks, I decided to try out a CSS framework, namely Blueprint. It was a paradigm shift for which I wasn’t quite ready. I made the mistake of trying to use Blueprint to recreate an existing design. The final product looked … odd. Rather, my eyes were so accustomed to how it has looked that I didn’t see how else it could look.

I abandoned the idea and moved onto other projects.

When my sister asked me to build a web site for the daycare her son attends, I decided to use Blueprint rather than figure out all the minute details of the design myself. I whipped up something fairly decent in a couple of hours, and I was impressed — Blueprint, like any good framework, sped up development time.

So I gave Blueprint another shot, this time in creating entirely new looks for my sites. I’ve spent the past two weeks moving everything to Blueprint. A few sites — including this one — did not undergo any redesign, but Blueprint does a nice job of cleaning up the layout. I did, however, make some very major changes to the family of sites.

Continue reading »

The Great Code Migration of 2009

Technophilia Professional

After three years of building site after site, I crafted what would become my own web framework in 2003. I didn’t know such a thing was called a framework — to me, it was just a bunch of code I kept reusing, so I structured it in a fashion I learned on my first job as a web developer.

I called that project Vigilante. It’s a code base that’s powered every site I’ve built, including ones I’ve done for the office. As of today, Vigilante is officially retired.

I spent the past week moving all my sites to CodeIgniter and jQuery. I’ve had a passing understanding of the Model-View-Controller pattern for a while now, and I even toyed with Ruby on Rails very briefly. I liked what Rails had to offer, but I’m at a point in my life where learning a new language just to use a new framework is a time sink in which I don’t want to invest.

At the same time, I knew Vigilante was getting creaky, and a shift in my own personal priorities — i.e., away from coding all the damn time — made me reluctant to bring it up to speed.

If I were to move to a framework, it would need to be one that would make the transition easy. So I did what I usually do when I’m stumped about something — I asked MetaFilter.

Continue reading »

What I learned: High-res screenshots + Ableton Live = Frustration in my blood

Making a high-resolution screenshot for printed materials will always be fraught with peril. I learned that the hard way when I attempted to incorporate screenshots of Ableton Live into artwork for the cover of Eponymous 4’s In C. A simple Google search for "300dpi screenshot" yields a lot of advice, some good, some bad. (The first result in the search is actually incorrect.)

For an explanation of why making high-resolution screenshots are so difficult, this AskMeFi question goes into good detail. This technique yielded the best results for other programs but not for Ableton Live.

The developers of Live have gone to great lengths to make the user interface look sleek in Windows XP. All the text is anti-aliased — not a single pixelated character in the interface. (Except maybe the menus.) Those anti-aliased characters wreak havoc when upscaling Live screenshots from 72ppi to 300ppi (or dpi, since that’s what Photoshop calls it.)

After experimenting with a whole bunch of tools — including some screenshot utilities for gaming — my only course of action was to remove all text from my Live screenshot. Once the text was gone, changing the color mode from RGB to Indexed Color resulted in a smaller palette, and I could resize the screenshot. Of course, that meant if I wanted the text back in the shot, I would have to add it manually.

Then again, there really is no way to go from 72ppi to 300ppi without some clean-up at the end of the process.

Apple users probably don’t have a problem with this.

What I learned: ‘Set Names utf8’ is your friend

I knew at some point, given the amount of Japanese interspersed with English on my various sites, I would need to change the Latin-1 encoding of my MySQL database (say that five times fast) to UTF-8. It hasn’t been much of an issue because when I display that text on a web site, I send UTF-8 encoding in the header.

I reached a breaking point when with trying to sort a text field with mixed languages. Because the database was encoded in Latin-1, the multibyte strings were sorted as single-byte strings. On a web page, that meant Japanese text would appear in the middle of the sort.

Well, I finally did a Google search on what it takes to perform a Latin-1-to-UTF-8 conversion. So long as your data is fairly clean, it takes about four commands in a shell prompt to finish. And that’s what I did — I dumped my database, converted it and loaded it into an empty server to see the results. I liked what I saw in phpMyAdmin. Hastily, I decided to forge ahead and do a real conversion.

Imagine my surprise when I reloaded my websites and saw question marks where there should have been Japanese text.

Continue reading »