The way we write web pages have not changed in about a decade. HTML and CSS have been pretty much the only front-end languages used for the web, and it’s only recently that they have started to make progress toward the more semantic and intuitive, with initiatives like HTML5 and CSS3.

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.”