Mixed language content

A few days ago I was wasting a few seconds on Facebook, scrolling down the newsfeed, and was suprised to see a short Japanese post, 「残念だな」, by someone I was pretty sure doesn’t know Japanese. Upon closer inspection it turned out Facebook had translated their German post into the language my account is set to display. This made me very aware — for a moment — that the fact in which language something is written carries information. Why did they suddenly post in Japanese? (Well … they didn’t.)
If, let’s say, a Chinese acquaintance of whom I know that they don’t know any German sent me birthday whishes in German, then they went through the trouble of goolging for German birthday whishes, using Google Translate or asking someone. In a similar fashion I report of elevators saying 「本日はご苦労様でした」 at my lab — because they do so in Japanese. Other times using a word from another language is just more concise and feels more accurate. Instead of talking about “a type of bicycle with a front basked often used by mothers” or leaving out information and just writing “bicycle” I name the thing by its name and say 「ママチャリ」.

The obvious problem with this is that my recent blog posts only really make sense to people that can read English and — at least some — Japanese. This made me think about working with Accept-Language headers. Just parse what a user’s browser tells me about their language capabilities and display content accordingly.

To figure out how I’d go about the display content accordingly part I googled “mixed language web content” and similar things. This yielded a lot of SEO articles saying DON’T!, a few W3C resources on how to mark and style parts of text depending on language and even an interesting looking book titled Language Mixing and Code-Switching in Writing. No solution though for my balancing act between information/authenticity and audience/intelligibility.

So, I played around myself and came up with this: 例 ← if your browser tells me you understand Japanese you will just see 「例」, otherwise the word will have a grey-ish background and when you hover over it, it will display “example”.
Best thing about them? They’re purely done in CSS. :3 (See the code here.) On the server side of things it gets a little bit unaesthetic — sadly. I maintain the contents of this website in Markdown and extra stuff is added in after parsing. For mixed language strings I use the following construct <‌!-- mixlang:例:example -->. Not quite as concise as e.g. Markdown links but well … HTML comments go through the parser untouched and then I built my small <span> matryoshkas. Writing a Markdown extention would be an alternative but I don’t have the time for looking into that right now.

By the time this post goes live I will have gone through my backlog of posts and added in optional English translation for all non English strings. レンジでgood!