Language Detection

2010-05-12 00:00:00 +0100 by Alex R. Young

My company's blog gets translated into Japanese, and when we launched
the blog I put a link to it in the site's navigation. A few weeks later
I noticed a lot of Windows computers displayed the navigation text as a
bunch of squares, which was annoying to say the least. I suppose it's
only natural that not all computers will have all languages and fonts,
but I preferred using text to an image.

JavaScript Solution

I reasoned that most people interested in reading Japanese would have
the capability to do so, which meant I needed to conditionally display
English or Japanese based on the browser's capabilities. But how do you
detect whether or not the fonts display properly?

After researching the problem I found it's possible to detect font sizes
using half and full width katakana. When typing Japanese you can usually
select half or full width katakana: ア vs. ア. If a browser can't display
these properly, they'll be the same invalid character and therefore the
same size.

I wrote a function like this:

function japaneseFontsAvailable() {
  var halfWidth = document.createElement('span');
  var fullWidth = document.createElement('span');

  document.body.insertBefore(halfWidth, document.body.firstChild);
  document.body.insertBefore(fullWidth, document.body.firstChild);
  var havejapanesefont = halfWidth.offsetWidth != fullWidth.offsetWidth;


  return havejapanesefont;

I can't remember where I originally discovered this concept, but there's
a stackoverflow thread on the subject: Is it possible to detect East
Asian language

Have you written any similar localization hacks?