Jump to content

Thai/english Language Website Experience

ThaiNotes

By ThaiNotes
in IT and Computers

 Share

Recommended Posts

ThaiNotes Senior Member

ThaiNotes

Posted
Posted

I've recently updated my Thai language website (http://thai-notes.com) and thought I'd share a few things I've discovered that might help others in a similar situation.

The first issue I faced was which Thai font to use. However, unlike with Roman fonts, there isn't really a core set which covers all platforms. (For example, in English one might use {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif}). This was a particular problem for one of my applications (the Thai Typing Trainer) which for technical reasons used to be extremely sensitive to the fonts available on any given platform. Fortunately, Google Webfonts has come to the rescue with an online version of Droid Sans Thai which is currently available under their early access program. There is a slight overhead when it loads – but it's not too bad.

One of the pluses of using Droid Sans Thai is that all common browsers appear to display above characters (tone marks, etc.) in the correct positions – I had no end of problems with the original version of the site trying to handle all browser/font combinations to get the text to display correctly.

There is one browser quirk that I couldn't easily get around without browser sniffing, and that's the display of “naked” tone marks and the like. If you display a tonemark without an associated character some browsers will insert a dotted circle automatically, and some won't, so it seemed better to include the dotted circle oneself. However, Firefox and related browsers will then insert another dotted circle, giving two. The only way around this I could think of was to detect when a user was using Firefox and using a small bit of Javascript to strip out the dotted circles from my webpages.

Since the character sets of Thai and English are mutually exclusive, I was able to set the font-family as {font-family: 'Source Sans Pro', 'Droid Sans Thai', sans-serif;} which I did at the <body> level, ensuring that all Thai text would be shown in Droid Sans Thai and all English text in Source Sans Pro. Unfortunately, this isn't a complete solution since Thai text needs to be shown at a larger font size than English text for legibility, so it was still necessary to use separate styling for English and Thai text sizes, which was a bit of a pain. It's a pity one can't specify font size for each member of a font-family.

My next problem was with displaying IPA text. The Google Webfonts approach didn't work because the IPA fonts they have available is incomplete, missing several key characters for Thai. In the end I customised an existing IPA font by stripping it of all unneeded characters to reduce the font file size and now serve it from my website. However, it's necessary to provide .ttf, .eot, .woff and .svg versions to cover all the major client platforms.

Displaying pages with Thai and English text in Chrome produces an irritating bar asking whether you want to translate the site. It seems that Google has created a meta tag which will suppress this irritating behaviour - <meta name="google" content="notranslate" />. There are lots of reports of this not working, but it seems fine for me.

It was interesting for me to see how quickly what is possible on the web has advanced in the last couple of years.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.



ASEANNOW

ASEANNOW (formerly Thai Visa) Thailand's oldest and most popular forum for expats and foreigners.

Sign up today and have your say

MORE INFO

POPULAR AREAS

CONTACT US

219/59 Asoke Towers, 15th Floor, Soi Sukhumvit 21, Watthana, Bangkok 10110
(+66) 99 196 1100
[email protected]

×
×
  • Create New...