by

Japanese text on the web is a lot like politics and sausage – it’s a messy process that nobody should ever have to see. But in the time I’ve been working at Tofugu, I’ve had to bear witness to some horrible, horrible things.

Let me pull back the curtain for a bit and show the absolute nightmare that exists behind Japanese text on the internet.

Kanji, Kanji Everywhere

If you’re unfamiliar with Asian history and culture, ancient Chinese culture had a tremendous impact on virtually every culture in East Asia. Other countries in Asia adopted Chinese food (like ramen!), customs, and parts of the language.

Most of you probably already know that the complicated characters in Japanese called kanji come from Chinese characters, but it doesn’t stop there. Korean has its own adaptation of Chinese characters called hanja, and until colonialism, Vietnamese used Chinese characters in its language.

These are all known as han characters, or sometimes CJK (Chinese, Japanese, Korean) characters.

We Are The WorldYou’d think that this would be a good thing, right? All these different countries and cultures using han characters, it’s like everybody’s joined hands and is singing We Are The World, right?

Oh, if only.

Why Kanji Doesn’t Look Quite Right On The Internet

Why are these han characters a problem? It has something to do with Unicode, a commonly used standard that’s used to display text from different languages on computers.

Somewhere down the line, somebody thought that it would be a great idea to save time and space by saying that, in Unicode, all of these han characters are, for all intents and purposes, exactly the same. This process was called Han Unification, and would soon become the bane of my existence.

Han Unification is a problem because han characters can look different and mean different things in each language.

Just take a look at this picture: it’s the same Unicode character, rendered in five different languages:
The Chinese versions look completely different from the other languages.

Unless the website explicitly says that a piece of kanji text is Japanese (with the HTML lang attribute), it won’t look quite right. It might use the Chinese style and make everything else (i.e. kana) look out of place.

This becomes a problem more often than you might think, whether it’s on your phone, when using electronic flashcards, or just reading the news.

And when you throw in different fonts, operating systems, and browsers into the mix, all bets are off.

Worse still, people argue that this is exactly what Unicode should be like. The argument is that, despite stylistic and cultural differences, underneath it all these characters are essentially the same.

I can understand the rationale behind Han Unification but, since I have the emotional capacity of a child and just want things to work, I’m going to say that it’s dumb and stupid and I hate it.

Why Japanese Isn’t Readable On The Internet

But hey, if your kanji looks wrong, all’s not lost. You can always use furigana, the simple, little characters you see above kanji to help you read them. Right?

Wrong.

While there is the technology to do this on the web (the HTML ruby element), you won’t see it much. It just doesn’t work on all web browsers (like Firefox), and few people choose to use it on their websites.

I would love to include furigana in the kanji I write to make it easier for beginners, but right now it’s not really an option.

But, unfortunately, web developers seem much more interested in tech demos and proof-of-concept sites than making sure the web looks as good in other languages as it does in English.

Maybe someday Japanese will get the first-class treatment on the web that it deserves, but right now I think we have a long way to go.

  • M_Nimon

    Interesting.  Now, if only someone can explain to me why in the world someone out there thought half-width katakana was a good idea…

  • Mescale

    Text Encoding of any kind is crazy nuts, I don’t rightly recall exactly what I was doing, but it was hell, I must have blacked out or something. Oh God, there’s a whole portion of my life I don’t remember, but I do remember it involved Unicode.

    WHAT THE HELL HAPPENED TO ME!

    I think it involved code pages, and UTF bits and things.

  • Peptron

    Funny, one of the main reasons I don’t use Chrome is because it defaults to Chinese Style whenever it sees East-Asian stuff. So reading Japanese makes your eyes bleed…

  • Belthazar

    Ruby text in my copy of firefox displays as 友達(ともだち). At least, I’m pretty sure it’s actually ruby text, because it displays properly when I view the same page in Safari. Not pretty, but not exactly nightmarish either. I tried to install a ruby text add on for Firefox, but it just made Firefox crash on startup.

  • Peptron

    Other than that, I also cannot stand how some sites use small fonts and defaults to serifed instead of non-serifed. Small font + serif means that you won’t be able to get your delivery of biang-biang-mian today, as your eyes will have exploded.

  • http://www.tofugu.com/ Hashi

    Yeah, I’ve heard that Chrome is the worst offender when it comes to this stuff.

  • Guest


    I’m going to say that it’s dumb and stupid and I hate it.” 
    qq moar

  • http://www.tofugu.com/ Hashi

     The example I used broke down the furigana per-character, rather than using the furigana for the entire word.

    I’m not really sure which is better, tbh, though per-word looks nicer on browsers without Ruby support.

  • http://www.tofugu.com/ Hashi

    *looks up biang-biang-mian*

    *head erupts*

  • http://www.tofugu.com/ Hashi

    Hmm, I’ll have to get back to you on that one.

  • トラビス

    OH MY GOD FURIGANA ON THE INTERNET WOULD ROCK I CAN’T EVEN IMAGINE HOW GREAT IT WOULD BE. Finally being able to actually read something after three years.

  • kuyaChristian

    No wonder why the text doesn’t make sense when I use Rikaikun for each kanji. T_______T

  • Guest

    This app for Firefox displays pronunciations and definitions of any Japanese word you hover over with your mouse: 
    http://www.polarcloud.com/rikaichan/

  • http://www.facebook.com/profile.php?id=100000511548857 Hobbid Hobbin

    While were in the topic of readable English on sites I should probably point out that when I use chrome sentences run into (and over) each other on the tofugu site. Not complaining though I can always use firefox 

  • dh10110

    In my own projects, I’ve faked ruby support in Firefox by putting the furigana in a data-ruby attribute in a span around the kanji, then using css to to show and position the content of the attriubute.

    [data-ruby] {    display: inline-block;    text-align: center;}[data-ruby]:before {    font-size: 60%;    content: attr(data-ruby);    display: block;    text-align: center;}

  • http://thepretentiousgamer.blogspot.com Rachel

    there’s one for chrome, too–furigana injector
    https://chrome.google.com/webstore/detail/cbahnmcliajmanjkaolemjelphicnein

  • http://www.facebook.com/profile.php?id=66701403 Jace ‘Lion’ Repshire

    There’s always Rikaikun/Rikaichan to spell out the Kanji in furigana! At least we have that to help! I think I pulled that from one of Tofugu’s resource pages, but if I didn’t, check it out. It’s a great browser add on that will explain Kanji when you hover over them with your mouse. It shows the furigana and meaning. :3

  • Berry Phillips

    It’s hardly surprising that this issue exists when we don’t even have any standardisation between browsers and operating systems for Latin character sets. So frustrating for us web developers (and designers, of course) who want to make websites that look the same on all platforms.

  • Berry Phillips

    Firugana is supported on at least the latest dev channel release of Chrome (v19.x): http://share.berryp.com/0S323z0P0I0R0f2q413N (The example is real text, not images.)

  • ianclarksmith

    I don’t suppose this is related to this being posted on HN the other day: http://www.reigndesign.com/blog/love-hotels-and-unicode/

  • http://www.tofugu.com/ Hashi

    A little bit! Han Unification is an issue that’s come up a few times before for me (usually on work with TextFugu), but that article inspired me a bit to actually write about it.

  • Meagan McClendon

    This exact thing used to trip me up all the time when I first started and I still hate it…
    Here’s an anecdote : D
    When I tried my hand at Chinese (after 5 years learning Japanese) I had my tests marked down because I wrote the way the book said instead of their study guide. I showed them to my professor and they said they had never noticed it before. *facepalm*
    At least I brought it to their attention… although I don’t know if they appreciated this Linguistics-Japanese undergrad showing them up on their own language’s supposedly-impossible-to-learn-as-a-foreigner-characters over fonts. (((<.<;;)

  • Zeldaskitten

    This happens to me too! Always thought it was weird. If I can’t read something, scrolling up and down usually fixes it..

  • coldcaption

    I use OS X and Windows and everything is a bit more harmonious on the Mac. I get into Mandarin a little bit as well and I don’t think I’ve had this problem on it, or I just haven’t noticed yet. Things are miserable on the PC, though. You’ll get bold, fun kana and then unforgiving serif’d kanji. Widths don’t match up. Everything is aliased. When I first got my Windows laptop and used it for Japanese, I spent a while trying to figure out what a kanji was. I couldn’t find it, but did eventually learn that it was 書 with some strokes minced.
    I have had some breakdowns with my Chinese school book, though. Sometimes /it/ has its characters rendered differently than the way I’m used to, so I won’t notice that I already know one for a while.

    Though if you think computers are bad, you should see my Chinese handwriting. My Japanese handwriting is fine (as long as I don’t have kanji amnesia~), but my Chinese handwriting is a hodgepodge of Chinese traditional characters, Japanese simplifications, and Chinese simplified characters.

  • coldcaption

    What? I use Chrome. Have I been corrupting myself? ;-;

  • http://www.tofugu.com koichi

    Half width is nice when you need to make it look like romaji, which I want to say is half width. I’m a fan, anyways.

  • ZXNova

     You’d think they’d put more effort into something like this…

  • linguarum

    While we’re on the subject, what are those odd-looking characters at the top of Tofugu posts lately? The one at the top of this article looks like some Korean characters and an upsidedown Roman capital “A.”

  • linguarum

    ((유∀유|||))

  • http://twitter.com/Meroigo Johannes / ヨハネス

    Funny how you chose the 冷. I remember in Japanese school when I had looked that up a word with that in it, in my iPod Touch (the app “Japanese”) and, was writing it in my notebook. The teacher stopped me and asked me to write it in another way, saying that the way I was writing was only used by computers and stuff. She told me the correct hand-writing way is how the Chinese version looks. ;D Pretty confusing……. But these confused moments are really rare and I can’t say I have bumped into any “problems” while surfing the Japanese side of the internet. Except not knowing all the kanji, and have to look up with Rikaikun (in Chrome). :P

  • Alvin B.

    It’s horrible on Android as well. I gave up trying to use Ankidroid because of font issues.

    Curious though, on the PC, how does Chrome show your furigana example?

  • http://www.tofugu.com/ Hashi

    Furigana renders fine on Chrome on all platforms as far as I know, but the default Japanese font is the big difference.

    Anyway, here’s what it looks like on my Windows 7 machine with the newest Chrome: http://i.imgur.com/HD09f.png

  • ಠ_ರೃ

     ( •̀ .̫ •́ )✧

  • ಠ_ರೃ

     It’s ’cause Google made Chrome too fast and now things can’t stop in time!

  • ಠ_ರೃ

     So how ’bout those line breaks, eh? Just poppin’ up wherever.

  • ಠ_ರೃ

     I think it looks adorable. It just tries so hard!

    ガンバレ、ハンカクカナサン!

  • http://www.tofugu.com koichi

    (*●⁰ꈊ⁰●)ノ

  • http://mobobe.com 13xforever

    I’ve been using  HTML Ruby Firefox addon for ages now (https://addons.mozilla.org/en-US/firefox/addon/html-ruby/ ).

    Yes, you have to install it separately, but strictly speaking, Ruby isn’t a part of HTML – it’s a module, so it’s up to browser vendor to decide whether to include it in their HTML engine or not.

  • http://twitter.com/arleas_ Lee Rolfing

    Actually I was using iknow.jp to learn a few words and was confused when they chose to use two different versions (apparently) in the same flash application no less.  I’d see 命令 and the 2nd kanji in that word would look like the Chinese version in one part, and the Japanese version in the other part.  I guess I can’t even suppose who sees it as what version.

    For the record, as I typed it I see it as the “no country” version (I suppose).  冷たい as well… I just figured it was a different style and went with it though… I mean, the first time I saw a cursive Q in English I was hella confused.

  • Mescale

    I can’t believe you made me start messing around with encodings and fonts on my web browser again. 

    Well played.

    (,,#゚Д゚):∴;’・,;`:ゴルァ!!

  • dthunt

     Y

  • dthunt

    Given I now want to tear my eyes out, I now see the problem with half-width katakana.

  • dthunt

    So, I’m going to come out against han unification here.

    People were IDIOTS to assume that utf-16 was a good idea, which I will happily assert without basis is the rationale behind han unification (I don’t see anyone saying that UCS-32 space is inadequate, yet, and variable-width encodings like utf-8 don’t care).

    These are different characters. Why would you collapse them merely because they look alike and (likely) have some common ancestor character?

  • Victorianakashima

    Hi
    I love your website, I think that it is very
    complete and super interesting.
    Keep it!
     

  • Stroopwafel

    I noticed the same thing as well. For instance; kanji like 家 and 糸 are both written slightly differently when you see them on a computer, in comparison to hand-writing. I guess there are just certain radicals that look slightly different when you write kanji in Chinese. Funny, eh?
    Maybe you could write Tofugu Guide on this subject, Hashi.

  • http://www.tofugu.com/ Hashi

    I’m definitely thinking about writing a guide.

  • http://www.tofugu.com/ Hashi

    THE ULTIMATE TROLL

  • http://www.tofugu.com/ Hashi

    It’s crazy where yo
    u’ll find them!

  • http://www.tofugu.com/ Hashi

    Yeah, fake ruby via CSS wizardry is definitely always an option, but I’d really like if Firefox supported ruby natively.

  • http://www.tofugu.com/ Hashi

    ¯_(ツ)_/¯