Honestly, the web-safe fonts for Korean totally suck. Gulim is too round for my taste, Dotum too pixelated, and Gungsuh… who wants to use that font for anything, really. The trick to use @font-face in Korean (or any other non-English characters) is to know your unicode range. Speaking Korean and Japanese (with some Chinese), I’ve had to work with unicode pretty extensively in my projects, working with PHP encode/decode methods, etc.. But I had to ask the guys at FontSquirrel to figure it out properly for Korean. For this quick tutorial, I’m going to use FontSquirrel @font-face generator to get the appropriate fonts displaying in Korean.

1. Pick your font.

Needless to say, you have to pick a font that’s compatible with the language of your choice. I’ve had hits and misses with this: some fonts decide to bail on you on browsers, but 99% of fonts that display fine on your local machine have worked for me. Newer browsers like Chrome tends to break some characters, but I’m hoping that improves over time. Here I’m going to work with Daum. Daum is a free font authored and distributed by daum.net, one of the biggest portals in Korea. It’s very clean yet carries enough umph to draw attention, which is rare to find in a Korean font, not to mention it’s one of the very very few that are free.

2. Figure out your Unicode range.

The unicode universe is well documented, and all you need to do is look.
UNICODE CHARTS
On the right side is our beloved Korean language under “Hangul (which is our writing system).” Unlike Japanese or Chinese writing systems, Koreans write by combining alphabets into characters, each of which represents a syllable. It’s so scientific, and I’m proud of it every time I learn a new language and realize how much sense our system makes. The “Jamo,” at 1100-11FF, are the 24 alphabets and their combinations. You could probably leave this out of the range, but that means you’re going to get broken characters if any syllable is incomplete. I like to leave them in just in case. The real range you want is in the “Hangul Syllables,” at AC00-D7AF.

3. FontSquirrel Generator Adventure

The FontSquirrel interface is pretty easy to work with as well. First, upload your font:

To enable unicode characters, you must go into the Expert mode:

Then, under Subsetting, click Custom Subsetting.

This brings up a bunch of rows of options, and we are really only concerned with the Unicode Range setting. A word of caution though: FontSquirrel uses AJAX to let you preview the unicode ranges, and since the Hangul Syllables range is so large, it may freeze your browser while it loads. If you click in the input field and start typing “1100-11FF, AC00-D7AF” you will almost certainly freeze your browser for a few minutes with each letter you type. I would recommend copying it onto your clipboard like that, and pasting it. This will freeze the browser for…5 minutes max, then it will display:

Voila!

4. Download & Implement CSS

If all went well, you should be able to download the generated webfont package by clicking a button at the bottom. The ZIP archive will contain the TTF, EOT, WOFF and SVG fonts (for all sorts of compatibility) and automatically generated CSS (how kind of them) so you just have to stick it into your CSS file! The result is beautiful, simple, SEO friendly and clean renderings without involving sIFR or FLIR:

I’ve only tried this with Korean, but I’d expect this to work the same way with any language. Hope this helps.

I recently started working for a few other web agencies, which means I’m getting more work but I don’t get to credit myself for any of it. Here is a freelance project I just finished – the client already had all the graphic elements ready, so I did not interfere in any way with the design save for the navigation, which is done in CSS(3) and jQuery (just for nice fade-ins. Looks completely harmless with JS disabled). Everything’s pretty straightforward HTML/CSS so…there’s that. I’m kind of bummed out I don’t get to upload all the other stuff I’ve been working on, but there are benefits to freelancing only half the time

I have been writing HTML and CSS codes since high school – about 10 years now – and thought I had learned most, if not all, tags and tricks to make my code do what I want. That is, until I was shown an HTML/CSS introductory page for Japanese people. If you can read Japanese, it’s here, still containing a lot of deprecated tags. It reminds me of HTML Goodies years before the emergence of W3C standards.

Anyway, browsing through this page I found two tricks I had never known before – and rightfully so, because they are completely useless if you don’t code Japanese pages.

Trick 1: Vertical write mode

Japanese books, newspapers and other print media are often printed in vertical lines, with the lines moving from right to left. Though they for the most part have abandoned this for web and other screen media, it is possible to replicate this with a CSS styling writing-mode:

Here’s how the above would look in Internet Explorer:

How cool is that!

Trick 2: Furigana

Furigana is a way to clarify the Japanese pronunciation of Kanji, or Chinese characters. While hiragana and katakana are original, phonetic, Japanese characters, they also use Chinese characters extensively (as do Koreans, but we don’t usually write out the words in Chinese characters) in their writing. So they write hiragana pronunciations in tiny letters above the character to tell you how to read it. You would often find this in manga, since most kids would have trouble reading all the kanji in them. It turns out, since the early days of HTML, it had tags for this.

I made the font large so you can see the effect:

No separate lines, no tables, just in-line, semantic tags.

There’s also a trick to make your characters display from right to left, which I assume is useful for languages like Hebrew and Arabic, but I don’t know those. Granted, these tricks are so close to being useless, and possibly deprecated. They also only seem to be supported by *GASP* Internet Explorer. Having dealt with Korean clients, I know Asians are very reluctant about changing to a “better” browser like Firefox or Chrome, and I wonder if it has to do with IE’s support for international features like these.

I learned something today in a field I thought I knew everything about! And for the very first time in my life, I said, “way to go, Internet Explorer.”

HappyKorean is a giant project I have been working on for the past four months or so. It is a start-up social networking site for the Korean community in Chicago (although they are open to expansion in the future), and I must say it was a grueling task to create this site from scratch – I delivered all the graphic components, front-end HTML/CSS/Javascript, back-end PHP and MySQL, not to mention the dual-language support requirement, allowing users to toggle between Korean and English at any time.

Here’s my “profile.” You can add people as your “neighbors,” track your “groups,” send messages, winks, and follow blogs.

This website has been sounding like a food blog lately, and I apologize. I haven’t really had the time to write about all the little things going on in my life but now, something other than food to update!

I recently created a WordPress-powered website for my friend Kelsey Arlen, a budding actress and singer from New York City. There was a lot of CSS magic I had to work – the lower-right corner graphic gave me loads of trouble, but in the end I was able to create a fully flexible layout.

I do get to do a decent amount of graphic design for it with my Photoshop, Illustrator and Flash skill sets. This includes newspaper ads (shown to the left), animated banners, pamphlets, posters, flags, and so much more. The one on the left represents my first newsprint publication – and full page! This was on Chicago Korea Weekly – sadly they don’t seem to have a website – and there have been other handful of newspaper ads I made on Kyocharo, as well as all sorts of web ads since this.

I will wait because currently I am working on a complete redesign and reprogramming of HK to follow the standards (mainly CSS), do better with SEO and have a better user experience. This is probably going to take a few months, but do keep checking back because I will be sure to post about it when it is done.

The code uses PHP and its Snoopy object to crack into the API using JSON:

Line 2 and 3 includes the Snoopy files and creates a new Snoopy object to fetch your data. Line 4 specifies the location of the data. ysquared86 is my Twitter username – replace it with yours. The ?count=1 grabs the latest tweet. Line 5 decodes the data using JSON and creates an array named $twitterdata. Lines 6 through 8 finds any other usernames in the entries and creates a link to their twitter page (e.g. @ysquared86). Line 9 uses WordPress’ make_clickable function to retain any links, and Line 10 finally prints the entry onto the page.

Another important attribute you might want to display is the timestamp, but yoast did not cover the topic in his entry, and I had to do an extensive google search to figure it out on my own. Most WP plug-ins for Twitter do this successfully, but again, I’d rather know what my code is doing. It took me forever to find that, as the $twitterdata[0]["text"] was the body of the twitter entry, “created_at” returns the timestamp attribute. However, it turns out, this timestamp does not follow any conventional format, which meant I had to use PHP’s substr function to make it look nice:

So there it is. I wanted to be able to CSS my way around the positioning, and having these PHP chops worked perfectly.

Many blogs out there will tell you that the first thing to check is whether you have wp_head() function in your header.php.

Including <?php wp_head(); ?> in your header.php lets WordPress scan for all the enabled plugins, generate the code for CSS and Javascript declarations needed to style them, and dynamically insert them. Lightbox CSS and JS files fall within its realm and it’s a good idea to check this.

So you can imagine my frustration when this didn’t solve the problem. After hours of internet research, I realized that jQuery, which I was using to systematically add styling to my list items, interferes with the Prototype-based JS files used by Lightbox. This can be easily fixed by adding a declaring a no-conflict variable and using it to call every function:

I hope this saved someone hours of Googling.

Dr. David A. Stein is a dentist in Albany, NY whose website I designed when I was first starting off. Last year, I offered to redo his website with more up-to-date codes, using table-less CSS, navigation sprites, DOCTYPE declarations, and cleaner graphics. I retained the mint-green color scheme he had picked for his first website.

status: online

I joined the Japan Club during my second year at Boston College. Seeing how their website was virtually non-existent, I took to the job of re-designing it, and above is the result. It featured image-map-based navigation (I would probably use CSS now), but it is also one of the classiest websites I’ve come up with in my opinion. I also served as their Culture Chair during my senior year, directing their Haru Matsuri (Spring Festival). That was a blast.

Now the new webmaster has changed out my design. I’m sure he wanted to signal a fresh start after my graduation, but he hasn’t been very good about updating it. He has been good enough to preserve this site HERE.

status: offline